v-for循环方法不直接导致渲染

Question

每次我加载方法 loadComparison 时，它 returns 需要不同项目的数据进行比较，但是当 Axios 请求完成时，v-for 循环使用新信息重新呈现并导致循环直到没有收到了更多的新信息。我如何继续允许自己迭代 "compare" 而不会导致循环重新呈现导致垃圾邮件 API 请求

<v-flex v-for="(item, i) in compare" :key='i'>
  <span style="display: hidden;">{{loadComparison(item)}}</span>

为存储在 item.symbol

中的不同货币轮询 API 的方法

loadComparison: function(item) {
      var symbol = item.symbol;

        var webLink = 'https://api.coinMarketCap.com/v1/ticker/' + symbol + '/?convert=USD';
        axios.get(webLink)
          .then(response => {
               item.data.Volume = response.data[0]["example"];
               item.data.Change = response.data[0]["example"];
               item.data.Price = response.data[0]["example"];
               item.data.MarketCap = response.data[0]["example"]; 
          })
      }

数据不会通过此 V-for 循环显示，该循环稍后会将部分数据放在一起以显示来自这些请求的数据

Answer 1

我的看法：

您可以使用其他数据属性如 cacheItems 来保存您的搜索结果。我更喜欢使用一本字典（如果每个项目都有一个唯一的键，那会更好，你不需要做哈希或者生成一个唯一的键）。

那么剩下的就简单了，从cacheItems中找出结果，通过唯一键找出结果

下面是一个示例（反复点击重新加载查看结果）

app = new Vue({
  el: "#app",
  data: {
    items: 'abcdefghijklmn'.split(''),
    cacheItems: {},
    reloadCount: 0
  },
  methods: {
    reload: function () {
      this.reloadCount++
      let index=1
      console.log(this.items)
      this.items.forEach((item)=>{
        setTimeout(()=>{
          let newValue = item + item + this.reloadCount
          this.$set(this.cacheItems, item, newValue)
        }, 300*index++)
      })
    }
  }
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <button @click="reload()">Reload</button>
  <p v-for="(item, index) in items" :key="index">{{cacheItems[item] || item}}</p>
</div>

Answer 2

或者，如果 axios 请求已经运行之前的项目，只需提前退出函数。

loadComparison: function(item) {
  var symbol = item.symbol;

  if (typeof item.previouslyRequestedSymbol === "undefined") {
    // first time the request is happenning for this item
    item.previouslyRequestedSymbol = symbol;
  } else if (item.previouslyRequestedSymbol === symbol) {
    return; //exit before making request
  }

  // axios ...
}

v-for循环方法不直接导致渲染

V-for loop method to not directly cause rendering

methods

vue.js

vuejs2

vuetify.js