[Vuejs]-How to reinitialize v-for component in vueJS

by

0👍

✅

I solved it with splice method. I’m removing an item by splice function and when the array gets empty it’s automatically get initialized by a function

        checkSort: function (e) {
            let valueOfIndex = this.numArray[0]

            if (valueOfIndex == e.value) {
                if (0 == this.numArray.length - 1) {
                    this.score += 100
                    this.numArray = this.generateUniqueArray(6, 40)
                    this.shuffledArray = this.shuffle(this.numArray)
                }
                this.score += 20
                this.numArray.splice(0, 1)
            } else {
                this.numArray = this.generateUniqueArray(6, 40)
                this.shuffledArray = this.shuffle(this.numArray)
            }
        },

0👍

  1. Make sure you initialize your array in the data attribute, even if it starts out empty:
data: {
  numArray: [],
}
  1. Always assign a bind a key to each value in the array:
<button
  @click="checkSort($event.target);"
  v-for="(num, index) in numArray"
  :value="num"
  :key="index"
>
  {{num}}
</button>

Leave a comment