Vue -tiefe Strukturen berechnet

Wenn es um die Berechnung von verschachtelten oder tiefen Datentypen wie Arrays oder Objekten geht, vue.JS oder eine andere Programmiersprache erkennt die hierarchische Änderung der Daten nicht automatisch. Wir alle wissen jedoch, dass dieser Vue.JS stellt die Uhr- und berechneten Eigenschaften zur Durchführung einiger Änderungsvariablen zur Verfügung. Aber wenn es um verschachtelte Datenänderungen geht, Vue.JS erkennt das nicht. Dieser Beitrag lernt, einige Änderungen durchzuführen, indem die verschachtelten Daten von Arrays oder Objekten beobachtet werden.

Bevor er lernte, verschachtelte Daten in Vue zu beobachten.JS, lassen Sie uns zunächst verstehen, wie die Watch -Immobilie funktioniert?

Beobachten Sie Eigentum

Die Watch -Eigenschaft wird verwendet, um eine Variable zu beobachten und dem Benutzer einige gewünschte Aufgaben für die Änderung der Variablen ausführen.

Beispiel: Beobachten Sie eine Variable

Zum Beispiel möchten wir bei der Änderung einer Variablen etwas trösten. Die Syntax für das Schreiben eines solchen Codes in Vue wird so verlaufen:

Nach dem Schreiben des obigen Codes wäre die Webseite so.

Wenn wir auf die Schaltfläche klicken, sollte der Status des „Boolvar“ aufgrund des On-Klick-Attributs der Schaltfläche geändert werden.

Es hat vollkommen gut funktioniert; Die Meldung "Klickte" wird auf der Konsole angezeigt.

Der Beobachter erkennt jedoch nicht die Änderung und wird nicht abgefeuert, wenn es darum geht, die Arrays oder Objekte zu beobachten. Lassen Sie uns eine Demonstration davon sehen.

Beispiel: Ein Objekt ansehen

Angenommen, wir haben ein Objekt in unserer Komponente und möchten die Änderung in der Eigenschaft des Objekts anzeigen. In dem unten angegebenen Beispiel habe ich ein Objekt mit dem Namen "Objvar" erstellt, das zwei Schlüsselwertpaare enthält, "Element" und "Menge". Ich habe eine Schaltfläche erstellt, auf der ich der Menge des Template -Tags "1" hinzugefügt habe. Zuletzt beobachte ich das Objekt „Objvar“ in der Watch -Eigenschaft und zeige eine Konsolennachricht an.

Jetzt soll dieser Code die Änderung der Menge des Objekts anzeigen. Wenn wir jedoch den Code ausführen und auf der Webseite auf die Schaltfläche klicken:

Sie können im obigen GIF sehen; In der Konsole passiert nichts.

Der Grund dafür ist, dass der Beobachter nicht tief in die Werte der Objekte schaut, und dies ist das eigentliche Problem, das wir jetzt lösen werden.

Vue.JS bietet die tiefe Eigenschaft, um tief in die Werte von Objekten und Arrays zu beobachten. Die Syntax für die Verwendung der tiefen Eigenschaft und das Beobachten der verschachtelten Daten lautet wie folgt:

In dieser Syntax haben wir die tiefe Eigenschaft auf wahre und ordnete die Funktion Handler () um.

Wenn wir nun den Code geändert haben, laden wir die Webseite neu und klicken Sie auf die Schaltfläche:

Hier können Sie sehen, dass der Beobachter arbeitet und die Nachricht in der Konsole anzeigt.

Abschluss

Nach dem Lesen dieses Beitrags tiefe oder verschachtelte Datenstrukturen in Vue angesehen und berechnet.JS ist nicht mehr schwierig. Wir haben gelernt, wie man die Änderung eines Wertes in einem Objekt oder Array beobachtet und einige Aufgaben mit Hilfe der „tiefen“ Eigenschaft von Vue ausführen.JS.