Vue verarbeitet die Array-Seite über die folgende Tabelle, ohne sie zu rendern

Dieses Mal werde ich Sie dazu bringen, die folgende Tabelle zu verwenden, um Array-Seiten ohne Rendering zu verarbeiten. Was sind die Vorsichtsmaßnahmen? Werfen wir einen Blick darauf.

Es ist zu beachten, dass der Grund, warum Vue Änderungen im ModellZustand überwachen kann, darin liegt, dass die JavaScript-Sprache selbst Proxy oder Objekt. Der Observ()-Mechanismus wird verwendet, um Änderungen im Status des -Objekts zu überwachen. Es gibt jedoch keine Möglichkeit, die Zuweisung von Array-Elementen direkt zu überwachen, wenn wir Array-Elementen direkt Werte zuweisen:

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

Dies führt dazu, dass Vue View nicht aktualisieren kann.

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

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

Oder löscht

über die Methode splice() ein Element und fügt dann ein weiteres Element hinzu, um den Effekt einer „Zuweisung“ zu erzielen:

Vue kann Splice-, Push-, Unshift- und andere Methodenaufrufe des Arrays überwachen, sodass der obige Code die Ansicht korrekt aktualisieren kann.

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Wie man mit der Optionsüberlagerung von select umgeht

Wie man die CSS-Bibliothek in Vue importiert .js

Das obige ist der detaillierte Inhalt vonVue verarbeitet die Array-Seite über die folgende Tabelle, ohne sie zu rendern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!