Phenquestions
När det gäller beräkning av kapslade eller djupa datatyper som matriser eller objekt, Vue.js eller något annat programmeringsspråk upptäcker inte automatiskt den hierarkiska förändringen i data. Vi vet dock alla att Vue.js tillhandahåller klockan och beräknade egenskaper för att utföra vissa ändringsvariabler. Men när det gäller kapslade dataändringar, Vue.js upptäcker inte det. Det här inlägget lär sig att utföra vissa ändringar genom att titta på de kapslade data för matriser eller objekt.
Innan du lär dig om att titta på kapslade data i Vue.js, låt oss först förstå hur klockfastigheten fungerar?
Titta på egendom
Klockegenskapen används för att titta på en variabel och låter användaren utföra vissa önskade uppgifter på variabelns ändring.
Exempel: Titta på en variabel
Till exempel, vid ändring av någon variabel, vill vi trösta något. Syntaxen för att skriva sådan kod i Vue kommer att gå så här:
Detta är en testsida
Efter att ha skrivit ovanstående kod skulle webbsidan vara så här.
Om vi klickar på knappen bör tillståndet för "boolVar" ändras på grund av knappens attribut för att klicka, och klockan ska automatiskt upptäcka förändringen i "boolVar" och visa meddelandesträngen på konsolen.
Det fungerade helt bra; meddelandet “Button clicked” visas på konsolen.
Men tittaren misslyckas med att upptäcka förändringen och blir inte avfyrad när det gäller att titta på matriserna eller föremålen. Låt oss se en demonstration av det.
Exempel: Titta på ett objekt
Anta att vi har ett objekt i vår komponent, och vi vill visa den förändring som hände i objektets egendom. I exemplet nedan har jag skapat ett objekt med namnet "objVar", som innehåller två nyckel-värdepar, "objekt" och "kvantitet". Jag har skapat en knapp där jag lägger till "1" i malltaggens antal. Slutligen tittar jag på objektet “objVar” i klockfastigheten och visar ett konsolmeddelande.
Detta är en testsida
Nu ska den här koden visa förändringen i objektets kvantitet. Men när vi kör koden och klickar på knappen på webbsidan:
Du kan se i ovanstående gif; ingenting händer i konsolen.
Anledningen bakom detta är att tittaren inte tittar djupt in i objektenas värden, och detta är det verkliga problemet som vi ska lösa nu.
Vue.js ger den djupa egenskapen för att titta djupt ner i värdena på objekt och matriser. Syntaxen för att använda den djupa egenskapen och titta på kapslade data är som följer:
I denna syntax har vi ställt in den djupa egenskapen till true och omarrangerat hanteraren () -funktionen.
Efter att ha ändrat koden, om vi laddar om webbsidan och klickar på knappen:
Här kan du se att tittaren arbetar och visar meddelandet i konsolen.
Slutsats
Efter att ha läst detta inlägg, titta på och beräkna djupa eller kapslade datastrukturer i Vue.js är inte svårt längre. Vi har lärt oss hur man kan titta på förändringen av ett värde i ett objekt eller en array och utföra vissa uppgifter med hjälp av den "djupa" egenskapen hos Vue.js.
