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

#1楼 票数:3 已采纳

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 (通过比较instrumentwatchlistnameprices项目),如果找到一个,它复制领域从watchlist项成我们的新对象。

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

更新了小提琴

  ask by brklyn8900 translate from so

未解决问题?本站智能推荐:

1回复

Axios Response数据和Vue JS,使用该数据

Vue的新手,不是Java爱好者,因此我有一个Vue组件,它使用Axios来获取控制台中的一些数据。 我只是无法将代码发布到表单元素中。 所以我有Axios拦截响应并获取数据 所以这是在页面加载和我的数据中装载的 您可以猜测哪一个不起作用,那么我要去哪儿了? 响应如
1回复

Vuejs:Axios 发布 JSON 数据和图像数据

目前,我正在创建一个包含图像数据和 JSON 数据的表单。 我使用 2 post 方法将图像数据和 JSON 数据分别发布到我的 nodejs 后端。 是否有任何可能的解决方案使我能够仅通过使用 axios 和后端使用 nodejs 为图像和 JSON 数据发布一次。 以下是我的代码。 前端vu
2回复

无法使用 api 从 axios 获取数据 - vue js

当我使用 vue js 获取数据时遇到问题,它返回 HTML 而不是 json。 我认为路由参数显示了帖子的 ID。 这是我在 vue 中的代码: 这是响应数据: 但是在邮递员中,我访问了 url "api/posts/1" 它显示了 json 数据 {"id": 1,"title": "S
1回复

VueJS 不呈现 for 循环内的数据集

我对 VueJS 还很陌生,所以请耐心等待! 我会尽量详细解释。 所以我正在创建一个 Vue 应用程序,它将简单地从服务器获取响应,遍历数据并将变量(Vue 数据)设置为值。 但是,当我在 for 循环中遍历数据时,我可以访问和更改 Vue 数据,但不会呈现它。 请参阅下文了解我更详细的意思 我
3回复

数据不会在Vue JS中更新

我有一个简单的形式像这样 Vue中我的方法对象中的getSummary方法是这样的 我的数据对象包含 我试图用axios的响应更新userData,然后使用它填充表以进行测试,我只是尝试了 console.log向我显示userData已更新,但是上面的这段代码没
1回复

vuejs使用属性绑定显示API数据

我有一个简单的应用程序,用户可以选择一个人,然后vue对该用户的帖子进行api调用。这些帖子中的每一个都有自己的评论,全部来自https://jsonplaceholder.typicode.com/评论部分永远是空的。 Codepen在这里 我的HTML JS逻辑
1回复

如何使用 vuejs 对获取的数据使用函数

我正在获取数据; } 我想在获取数据后计算总工资并将其呈现为 正确的做法是什么? 我不想像那样使用超时或 smt。
1回复

无法使用 VueJs 从 Mysql DB 获取数据

我尝试在前端使用vuejs和axios通过{{orderdtls.id}}从 mysql db 获取数据,但数据响应为null 。 此外,我检查了我的 php 代码,但没有发现任何问题,而且 php 代码本身单独工作正常。 PHP代码: Vue 脚本: 这是控制台日志: