Lösen Sie das Problem, dass die Seite nicht gerendert wird, wenn Vue das Array mithilfe der folgenden Tabelle ändert

Jetzt werde ich einen Artikel mit Ihnen teilen, um das Problem zu lösen, dass Vue das Array über die folgende Tabelle ändert und die Seite nicht gerendert wird. Es hat einen sehr guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Es ist zu beachten, dass Vue Änderungen im Modellstatus überwachen kann, weil die JavaScript-Sprache selbst einen Proxy- oder Object.observe()-Mechanismus zur Überwachung von Änderungen im Objektstatus bereitstellt. Es gibt jedoch keine Möglichkeit, die Zuweisung von Array-Elementen direkt zu überwachen, wenn wir Array-Elementen Werte direkt zuweisen:

vm.todos[0] = {
  name: 'New name',
  description: 'New description'
};

führt dazu, dass Vue die Ansicht nicht aktualisieren kann.

Der richtige Weg besteht nicht darin, dem Array-Element einen Wert zuzuweisen, sondern zu aktualisieren:

vm.todos[0].name = 'New name';
vm.todos[0].description = 'New description';

Oder löschen Sie ein Element über Methode splice() Fügen Sie nach dem Element ein weiteres Element hinzu, um den Effekt der „Zuweisung“ zu erzielen:

var index = 0;
var newElement = {...};
vm.todos.splice(index, 1, newElement);

Vue kann die Methodenaufrufe splice, push, unshift und andere des Arrays überwachen, sodass der obige Code korrekt ausgeführt werden kann Aktualisieren Sie die Ansicht.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie use zum Registrieren globaler Vue-Komponenten und globaler Anweisungen

Eine kurze Diskussion zum Import von vue.js Methode der CSS-Bibliothek (elementUi)

Verwenden Sie JS-Code, um QR-Code zu erstellen und Funktionen zu generieren (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonLösen Sie das Problem, dass die Seite nicht gerendert wird, wenn Vue das Array mithilfe der folgenden Tabelle ändert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!