So aktualisieren Sie v-for in Vue

Tipps:

Die Methode zur Array-Änderung führt zur Aktualisierung von v-for und der Seite
Array-unveränderliche Methode: Gibt ein neues Array zurück, das keine Aktualisierung von v-for verursacht. Wenn der aktualisierte Wert nicht erkannt werden kann, können Sie overwrite oder this.$set() verwenden.

Die Methode zur Array-Änderung ist wie folgt:

1. arr.push() fügt Elemente von hinten hinzu

arr.push(5)

2. arr.pop() löscht das Element von hinten, nur ein

arr.pop()

3. arr.shift() löscht Elemente von vorne, es kann nur eins gelöscht werden

arr.verschiebung()

4. arr.unshift() fügt Elemente von vorne hinzu und gibt die Länge des Arrays nach dem Hinzufügen zurück

arr.unshift(8)

5. arr.splice(i,n) löscht N (Anzahl der Löschungen) beginnend bei i (Indexwert)

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

6. arr.sort() sortiert das Array und gibt das sortierte Array zurück

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

7. arr.reverse() kehrt das Array um

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

Array-nicht-mutierende Methoden sind wie folgt:

1. arr.concat() verbindet zwei Arrays

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

2. arr.slice(start,end) schneidet den Index von Anfang bis Ende ab, mit Ausnahme des Startindex.

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

Override-Methode

<li v-for="(Wert, Index) in arr" :Schlüssel="Index">
     {{ val }}
   </li>
   <button @click="sliceBtn">Die ersten 3 in Scheiben schneiden</button>
   
    SchnittBtn(){
   // 2. Die Array-Slice-Methode führt nicht zur Aktualisierung von v-for // Slice ändert das ursprüngliche Array nicht // this.arr.slice(0, 3)

   // v-for-Update lösen – das ursprüngliche Array überschreiben let newArr = this.arr.slice(0, 3)
   this.arr = neuesArr
 },

this.$set()-Methode

<li v-for="(Wert, Index) in arr" :Schlüssel="Index">
     {{ val }}
   </li>
   <button @click="sliceBtn">Aktualisiere den Wert des Index 0</button>
   
   SchnittBtn(){
   // Beim Aktualisieren eines Wertes kann v-for diesen nicht erkennen // this.arr[0] = 1000
   
   // Lösung – this.$set()
   // Parameter 1: Zielstruktur aktualisieren // Parameter 2: Position aktualisieren // Parameter 3: Wert aktualisieren let newArr = this.arr.slice(0, 3)
   this.arr = neuesArr
 },

Dies ist das Ende dieses Artikels über die V-for-Update-Erkennung in Vue. Weitere relevante Inhalte zur Vue-V-for-Update-Erkennung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren: