[Vuejs]-V-for loop method to not directly cause rendering

by

0👍

✅

My opinion:

You can use another data property like cacheItems to save your search result. I prefer to using one dictionary (if each item has one unique key, that will be better, you don’t need to do hash or else to generate one unique key).

Then the rest is simple, find out the result from the cacheItems to find out the result by the unique key.

Below is one sample (click Reload again and again to see the result)

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>

0👍

alternatively, simply exit the function earlier if the axios request has already been run for the item before.

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 ...
}

Leave a comment