Question

我有两个数据源，一个是我在Vue实例中创建的，另一个是我从api导入的。如何匹配从api获取的数据并将其与我创建的数据结合在一个表中显示？

HTML：

 <div class="ui container" id="app">
  <br>
  <div class="ui two column divided grid">
    <div class="row">
      <div class="ten wide column">
        <table class="ui unstackable green table">
          <thead>
            <tr>
              <th>Instrument</th>
              <th class="right aligned">Position</th>
              <th class="right aligned">Price</th>
              <th class="right aligned">Total</th>
              <th class="right aligned">%</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in watchlist">
              <td>{{ item.instrument }}</td>
              <td class="right aligned">{{ item.position }}</td>
              <td class="right aligned"></td>
              <td class="right aligned"></td>
              <td class="right aligned"></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="six wide column" :attribute="priceData">
        <table class="ui unstackable red table">
          <thead>
            <tr>
              <th  class="center aligned">Coin</th>
              <th  class="center aligned">Price</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="coin in prices">
              <td>{{ coin.name }}</td>
              <td class="center aligned">{{ coin.price_usd }}</td>
            </tr>
          </tbody>
      </table>
      </div>
    </div>
  </div>
</div>

目前我有两个表，每个表都显示我想要合并到一个表中的数据。

Vue：

      new Vue({
    el: '#app',
    data: {
      watchlist: [
        {  instrument: 'Artbyte', position: 10000 },
        {  instrument: 'Civic (CVC)', position: 1000 },
        {  instrument: 'IOTA', position: 600 },
        {  instrument: 'Basic Attention Token', position: 600 },
        {  instrument: 'Sentiment (SAN)', position: 500 },
        {  instrument: 'TenX', position: 400 },
        {  instrument: 'OmiseGo', position: 100 },
        {  instrument: 'EOS', position: 200 },
        {  instrument: 'Litecoin', position: 30 },
        {  instrument: 'Ethereum', position: 10 },
        {  instrument: 'Bitcoin', position: 2 },
        {  instrument: 'District0x', position: 2000 },
        {  instrument: 'Aragon', position: 60 },
        {  instrument: 'LBRY Credits', position: 200 }
      ],
      prices: []
    },
    computed: {
      priceData: function () {
        var t = this
        axios.get('https://api.coinmarketcap.com/v1/ticker/')
          .then(function (response) {
            t.prices = response.data
          })
          .catch(function (error) {
            console.log(error)
          })
      },
      getPrices: function () {
        return this.price
      }
    }
  })

继承人jsfiddle https://jsfiddle.net/brklyn8900/83y53b2k/12/

Answer 1

created不应该是计算的;它不会返回任何东西。它应该在created() { var t = this axios.get('https://api.coinmarketcap.com/v1/ticker/') .then(function (response) { t.prices = response.data }) .catch(function (error) { console.log(error) }) }, computed: { combinedData() { return this.prices.map(c => { var obj = Object.assign({}, c); var item = this.watchlist.find(w => w.instrument === obj.name); if (item) { Object.assign(obj, item); } return obj; }); } },阶段运行。

您可以编写一个计算器来组合两个数据源，如下所示：

map

prices函数会复制watchlist中的每个项目，在instrument中查找匹配的项目（通过比较watchlist项目中的name到prices项目中的watchlist，如果找到，则将prices项中的字段复制到新对象中。

更短，它创建一个新数组，其项目与watchlist相同，但匹配的sudo npm install -g configurable-http-proxy pip3 install jupyterhub pip3 install --upgrade notebook项合并到其中（可以找到匹配项）。

Updated fiddle

VueJS结合了数据源

1 个答案: