Vue beregnet dype strukturer

Når det gjelder beregning av nestede eller dype datatyper som matriser eller objekter, vue.JS eller noe annet programmeringsspråk oppdager ikke automatisk den hierarkiske endringen i dataene. Vi vet imidlertid alle Vue.JS gir klokken og beregnede egenskaper for å utføre noen endringsvariabler. Men når det gjelder nestede dataendringer, Vue.JS oppdager ikke det. Dette innlegget vil lære å utføre noen endringer ved å se de nestede dataene om matriser eller objekter.

Før du lærer om å se nestede data i Vue.JS, la oss først forstå hvordan klokkeegenskapen fungerer?

Se på eiendom

Watch -egenskapen brukes til å se en variabel og lar brukeren utføre noen ønskede oppgaver på variabelenes endring.

Eksempel: Se på en variabel

Ved endring av en viss variabel vil vi for eksempel trøste noe. Syntaksen for å skrive slik kode i Vue vil gå slik:

Etter å ha skrevet koden ovenfor, ville websiden være slik.

Hvis vi klikker på knappen, bør tilstanden til "Boolvar" endres på grunn av knappens attributt på klikk, og klokken skal automatisk oppdage endringen i "Boolvar" og vise meldingstrengen på konsollen.

Det fungerte helt fint; Meldingen “-knapp klikket” vises på konsollen.

Men Watcher klarer ikke å oppdage endringen og får ikke sparken når det gjelder å se på matriser eller objekter. La oss se en demonstrasjon av det.

Eksempel: Å se på et objekt

Anta at vi har et objekt i komponenten vår, og vi ønsker å vise endringen som skjedde i objektets egenskap. I eksemplet nedenfor har jeg opprettet et objekt med navnet "Objvar", som inneholder to nøkkelverdipar, "element" og "kvantitet". Jeg har opprettet en knapp der jeg legger til "1" til malkallens mengde. Til slutt ser jeg på "Objvar" -objektet i Watch -egenskapen og viser en konsollmelding.

Nå skal denne koden vise endringen i mengden av objektet. Men når vi utfører koden og klikker på knappen på websiden:

Du kan se i ovennevnte GIF; Ingenting skjer i konsollen.

Årsaken bak dette er at Watcher ikke ser dypt inn på verdiene til objektene, og dette er det virkelige problemet vi skal løse nå.

Vue.JS gir den dype eiendommen for å se innerst inne i verdiene til objekter og matriser. Syntaksen for bruk av den dype egenskapen og se de nestede dataene er som følger:

I denne syntaksen har vi satt den dype eiendommen til sann og omorganisert behandler () -funksjonen.

Nå, etter å ha endret koden, hvis vi laster inn websiden på nytt og klikker på knappen:

Her kan du se at Watcher fungerer og viser meldingen i konsollen.

Konklusjon

Etter å ha lest dette innlegget, sett og beregnet dype eller nestede datastrukturer i Vue.JS er ikke vanskelig lenger. Vi har lært hvordan vi kan se endringen av en verdi i et objekt eller et utvalg og utføre noen oppgaver ved hjelp av den "dype" egenskapen til Vue.JS.