VueJS 合并数据源

Question

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

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>

目前我有两个 table，每个都显示我想合并为一个 table 的数据。

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 不应该是一个计算；它没有 return 任何东西。它应该运行在 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 中查找匹配项（通过比较 [=15= 中的 instrument ] 项到 prices 项中的 name），如果找到一个，它会将 watchlist 项中的字段复制到我们的新对象中。

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

Updated fiddle

VueJS 合并数据源

VueJS combine data sources

javascript

vue.js

axios