CODEWITHSUNDEEP
vue.js
jj008
jj008

Reputation: 1093

Sorting array from vuex store (infinite render warning)

I'm retrieving an array of objects from the vuex store and I am trying to sort that array in one of my components (I don't want to sort the array in the store). But I get an error infinite update loop in a component render function in my browser. What is happening here and how can I fix this?

<template>
  <div
    v-for="(item, i) in itemList">
    {{item.description}}
  </div>
</template>


computed: Object.assign({},
  mapGetters({
    currentItemList: "item/current",
  }),
  {
   itemList() {
     if(this.currentItemList != undefined) {
       return this.currentItemList.sort(function(a, b) {
           var textA = a.description.toUpperCase()
           var textB = b.description.toUpperCase()
           return (textA < textB) ? -1 : (textA > textB) ? 1 : 0
         })
      }
      else {
        return []
      }
    },
  }
)

Upvotes: 0

Views: 2119

Answers (2)

Jns
Jns

Reputation: 3257

With this.currentItemList.sort you are mutating reactive data in computed properties - that will trigger the component always to rerender ... Do not mutate data in computed properties. Instead make sure to sort on a copy of your array: this.currentItemList.slice().sort(...)

Upvotes: 7

akuiper
akuiper

Reputation: 215117

sort will mutate the array in place. You can create a local copy of the item list in your component and then sort the copy to avoid the side effect:

itemList() {
  if(this.currentItemList != undefined) {
    var localItemList = JSON.parse(JSON.stringify(this.currentItemList))
    return localItemList.sort(...)

Upvotes: 6

Related Questions