javascript - VueJS结合数据源

我有两个数据源，一个是在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>

目前我有两个表，每个表都显示我想合并成一个表的数据。
真空室：

      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
      }
    }
  })

这里有一个jsfiddlehttps://jsfiddle.net/brklyn8900/83y53b2k/12/

最佳答案

priceData不应为计算值；它不返回任何内容。它应该在created阶段运行。
您可以编写一个computed来组合这两个数据源，如下所示：

    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项合并到其中（匹配项可以找到）。
Updated fiddle

关于javascript - VueJS结合数据源，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45703253/