VueJS合併數據源

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

priceData不應該是一個計算;它不會返回任何東西。它應該在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（查找匹配的項目在比較instrumentwatchlist項目到name項目在prices項目），並且如果它找到一個，它將從watchlist項目的字段複製到我們的新對象。

表示較短，它會創建一個新的數組，其項目與prices相同，但匹配項合併到其中（匹配項可找到）。

Updated fiddle