Phenquestions
Når det gjelder beregning av nestede eller dype datatyper som matriser eller objekter, kan Vue.js eller noe annet programmeringsspråk oppdager ikke automatisk den hierarkiske endringen i dataene. Imidlertid vet vi alle at Vue.js gir klokke- og beregningsegenskapene for å utføre endringsvariabler. Men når det gjelder nestede dataendringer, Vue.js oppdager ikke det. Dette innlegget lærer å utføre noen endringer ved å se på nestede data fra 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å eiendommen
Klokkeegenskapen brukes til å se på en variabel og lar brukeren utføre noen ønskede oppgaver på variabelens endring.
Eksempel: Se en variabel
For eksempel, ved endring av en variabel, vil vi konsolere noe. Syntaksen for å skrive en slik kode i Vue vil gå slik:
Dette er en testside
Etter å ha skrevet ovennevnte kode, vil websiden være slik.
Hvis vi klikker på knappen, bør tilstanden til “boolVar” endres på grunn av knappens on-click-attributt, og klokken skal automatisk oppdage endringen i “boolVar” og vise meldingsstrengen på konsollen.
Det fungerte helt greit; meldingen “Button clicked” vises på konsollen.
Men observatøren oppdager ikke endringen og blir ikke sparket når det gjelder å se på matriser eller gjenstander. La oss se en demonstrasjon av det.
Eksempel: Å se på et objekt
Anta at vi har et objekt i komponenten vår, og vi vil vise endringen som skjedde i objektets eiendom. I eksemplet nedenfor har jeg opprettet et objekt med navnet "objVar", som inneholder to nøkkelverdipar, "element" og "antall". Jeg har opprettet en knapp der jeg legger til "1" i malets antall. Til slutt ser jeg "objVar" -objektet i klokkeegenskapen og viser en konsollmelding.
Dette er en testside
Nå skal denne koden vise endringen i mengden på objektet. Men når vi utfører koden og klikker på knappen på websiden:
Du kan se i gifen ovenfor; ingenting skjer i konsollen.
Årsaken bak dette er at seeren ikke ser dypt inn i verdiene til gjenstandene, og dette er det virkelige problemet vi skal løse nå.
Vue.js gir den dype egenskapen for å se dypt ned i verdiene til objekter og matriser. Syntaksen for å bruke den dype egenskapen og se på de nestede dataene er som følger:
I denne syntaksen har vi satt den dype egenskapen til true og omorganisert handler () -funksjonen.
Nå, etter endring av koden, hvis vi laster inn nettsiden på nytt og klikker på knappen:
Her kan du se at seeren jobber og viser meldingen i konsollen.
Konklusjon
Etter å ha lest dette innlegget, ser og beregner du dype eller nestede datastrukturer i Vue.js er ikke vanskelig lenger. Vi har lært hvordan vi kan se på endring av en verdi i et objekt eller en array og utføre noen oppgaver ved hjelp av den "dype" egenskapen til Vue.js.
