V-for循环方法不直接导致渲染答案

【问题标题】：V-for loop method to not directly cause renderingV-for循环方法不直接导致渲染
【发布时间】：2018-05-01 01:10:29
【问题描述】：

每次我加载方法 loadComparison 时，它都会返回比较中不同项目所需的数据，但是当 Axios 请求完成时，v-for 循环会使用新信息重新呈现并导致循环，直到没有收到更多新信息.我如何继续允许自己迭代“比较”而不导致循环重新呈现导致垃圾邮件 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 循环显示，该循环稍后将部分数据放在一起以显示来自这些发出的请求

【问题讨论】：

标签： methods vue.js vuejs2 vuetify.js

【解决方案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>

【讨论】：

【解决方案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 ...
}

【讨论】：