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 （通过比较instrument的watchlist项name在prices项目），如果找到一个，它复制领域从watchlist项成我们的新对象。

简而言之，它创建一个新的数组，其项目与prices相同，但将匹配的watchlist项目合并到其中（可以找到匹配的项目）。

更新了小提琴