Question

每次加载方法loadComparison时，它都会在比较中的不同项目上返回所需的数据，但是当Axios请求完成时，v-for循环会重新呈现新信息并导致循环，直到不再收到新信息为止。我如何继续允许自己迭代“比较”而不会导致循环重新渲染导致垃圾邮件API请求

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

轮询API以查找存储在item.symbol

中的不同货币的方法

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循环方法不直接导致渲染

2 个答案: