Phenquestions
Når det kommer til beregning af indlejrede eller dybe datatyper som arrays eller objekter, Vue.js eller ethvert andet programmeringssprog registrerer ikke automatisk den hierarkiske ændring i dataene. Vi ved dog alle, at Vue.js giver uret og de beregnede egenskaber til at udføre nogle ændringsvariabler. Men når det kommer til indlejrede dataændringer, Vue.js opdager ikke det. Dette indlæg lærer at udføre nogle ændringer ved at se de indlejrede data fra arrays eller objekter.
Før du lærer at se indlejrede data i Vue.js, lad os først forstå, hvordan urejendommen fungerer?
Se ejendom
Uregenskaben bruges til at se en variabel og giver brugeren mulighed for at udføre nogle ønskede opgaver på variabelens ændring.
Eksempel: Se en variabel
For eksempel vil vi ved ændring af en variabel trøste noget. Syntaksen for at skrive en sådan kode i Vue vil gå sådan her:
Dette er en testside
Efter at have skrevet ovenstående kode, ville websiden være sådan.
Hvis vi klikker på knappen, skal tilstanden til "boolVar" ændres på grund af knappens on-click-attribut, og uret skal automatisk registrere ændringen i "boolVar" og vise meddelelsesstrengen på konsollen.
Det fungerede helt fint; meddelelsen “Klik på knappen” vises på konsollen.
Men seeren undlader at opdage ændringen og bliver ikke fyret, når det kommer til at se arrays eller genstande. Lad os se en demonstration af det.
Eksempel: Se et objekt
Antag, at vi har et objekt i vores komponent, og vi vil vise den ændring, der skete i objektets ejendom. I eksemplet nedenfor har jeg oprettet et objekt med navnet "objVar", som indeholder to nøgleværdipar, "element" og "antal". Jeg har oprettet en knap, hvor jeg tilføjer "1" til skabelonets tagmængde. Endelig ser jeg “objVar” -objektet i uregenskaben og viser en konsolbesked.
Dette er en testside
Nu skal denne kode vise ændringen i genstandens mængde. Men når vi udfører koden og klikker på knappen på websiden:
Du kan se i ovenstående gif; der sker ikke noget i konsollen.
Årsagen bag dette er, at seeren ikke ser dybt ned i objektenes værdier, og det er det virkelige problem, som vi skal løse nu.
Vue.js giver den dybe egenskab til at se dybt ned i værdierne på objekter og arrays. Syntaksen for at bruge den dybe egenskab og se de indlejrede data er som følger:
I denne syntaks har vi indstillet den dybe egenskab til sand og omarrangeret handler () -funktionen.
Efter ændring af koden, hvis vi genindlæser websiden og klikker på knappen:
Her kan du se, at seeren arbejder og viser meddelelsen i konsollen.
Konklusion
Efter at have læst dette indlæg, se og beregne dybe eller indlejrede datastrukturer i Vue.js er ikke længere vanskeligt. Vi har lært, hvordan man kan se ændringen af en værdi i et objekt eller et array og udføre nogle opgaver ved hjælp af Vue's "dybe" egenskab.js.
