How to update v-for in Vue

Tips:

Array change method will cause v-for to update and the page to update
Array non-changing method: Return a new array, which will not cause v-for to update. If the updated value cannot be detected, you can use overwrite or this.$set()

The array modification method is as follows:

1. arr.push() adds elements from the back

arr.push(5)

2. arr.pop() deletes the element from the back, only one

arr.pop()

3. arr.shift() deletes elements from the front, only one can be deleted

arr.shift()

4. arr.unshift() adds elements from the front and returns the length of the array after adding them

arr.unshift(8)

5. arr.splice(i,n) deletes N (number of deletions) starting from i (index value)

let arr = [1,2,3,4,5]
console.log(arr.splice(2,2)) //[3,4]
console.log(arr) // [1,2,5]

6. arr.sort() sorts the array and returns the sorted array

let arr = [2,10,6,1,4,22,3]
console.log(arr.sort()) // [1, 10, 2, 22, 3, 4, 6]
let arr1 = arr.sort((a, b) => a - b)  
console.log(arr1) // [1, 2, 3, 4, 6, 10, 22]
let arr2 = arr.sort((a, b) => b a)  
console.log(arr2) // [22, 10, 6, 4, 3, 2, 1]

7. arr.reverse() reverses the array

let arr = [1,2,3,4,5]
console.log(arr.reverse()) // [5,4,3,2,1]
console.log(arr) // [5,4,3,2,1]

Array non-mutating methods are as follows:

1. arr.concat() connects two arrays

let arr = [1,2,3,4,5]
console.log(arr.concat([1,2])) // [1,2,3,4,5,1,2]
console.log(arr) // [1,2,3,4,5]

2. arr.slice(start,end) cuts off the index from start to end, excluding the start index.

let arr = [1,2,3,4,5]
console.log(arr.slice(1,3)) // [2,3]

Override Method

<li v-for="(val, index) in arr" :key="index">
     {{ val }}
   </li>
   <button @click="sliceBtn">Slice the first 3</button>
   
    sliceBtn(){
   // 2. Array slice method will not cause v-for to update // slice will not change the original array // this.arr.slice(0, 3)

   // Solve v-for update - overwrite the original array let newArr = this.arr.slice(0, 3)
   this.arr = newArr
 },

this.$set() Method

<li v-for="(val, index) in arr" :key="index">
     {{ val }}
   </li>
   <button @click="sliceBtn">Update the value of index 0</button>
   
   sliceBtn(){
   // When updating a value, v-for cannot detect it // this.arr[0] = 1000
   
   // Solution - this.$set()
   // Parameter 1: Update target structure // Parameter 2: Update position // Parameter 3: Update value let newArr = this.arr.slice(0, 3)
   this.arr = newArr
 },

This is the end of this article about v-for update detection in Vue. For more relevant vue v-for update detection content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: