Phenquestions
Kada je riječ o izračunavanju ugniježđenih ili dubinskih vrsta podataka poput nizova ili objekata, Vue.js ili bilo koji drugi programski jezik ne otkriva automatski hijerarhijsku promjenu podataka. Međutim, svi znamo da je Vue.js pruža svojstva sata i izračunava svojstva za izvođenje nekih varijabli promjene. Ali što se tiče ugniježđenih promjena podataka, Vue.js to ne otkriva. Ovaj će post naučiti izvoditi neke promjene promatrajući ugniježđene podatke nizova ili objekata.
Prije učenja o gledanju ugniježđenih podataka u Vueu.js, prvo shvatimo kako funkcionira svojstvo sata?
Pogledajte svojstvo
Svojstvo watch koristi se za gledanje varijable i omogućava korisniku da izvrši neke željene zadatke na promjeni varijable.
Primjer: Pazi na varijablu
Na primjer, pri promjeni neke varijable, želimo nešto utješiti. Sintaksa za pisanje takvog koda u Vueu ići će ovako:
Ovo je stranica za testiranje
Nakon pisanja gornjeg koda, web stranica bi bila ovakva.
Ako kliknemo na gumb, stanje "boolVar" trebalo bi se izmijeniti zbog atributa na klik gumba, a sat bi trebao automatski prepoznati promjenu u "boolVar" i prikazati niz poruka na konzoli.
Djelovalo je savršeno u redu; na konzoli se prikazuje poruka "Gumb je kliknut".
No, promatrač ne uspije otkriti promjenu i ne otpušta se kada je riječ o promatranju nizova ili objekata. Pogledajmo demonstraciju toga.
Primjer: Promatranje objekta
Pretpostavimo da imamo objekt u našoj komponenti i želimo prikazati promjenu koja se dogodila u svojstvu objekta. U dolje navedenom primjeru izradio sam objekt s imenom "objVar", koji sadrži dva para ključ / vrijednost, "item" i "količina". Stvorio sam gumb na kojem dodajem "1" količini oznake predloška. Na kraju, promatram objekt „objVar“ u svojstvu sata i prikazujem poruku konzole.
Ovo je stranica za testiranje
Sada bi ovaj kôd trebao prikazati promjenu u količini predmeta. Ali, kada izvršimo kod i kliknemo gumb na web stranici:
Možete vidjeti u gornjem gifu; u konzoli se ništa ne događa.
Razlog tome je taj što promatrač ne gleda duboko u vrijednosti predmeta, a to je stvarni problem koji ćemo sada riješiti.
Vue.js pruža svojstvo deep za promatranje vrijednosti objekata i nizova. Sintaksa korištenja svojstva deep i gledanja ugniježđenih podataka je sljedeća:
U ovoj smo sintaksi svojstvo deep postavili na true i preuredili funkciju handler ().
Sada, nakon promjene koda, ako ponovo učitamo web stranicu i kliknemo na gumb:
Ovdje možete vidjeti da promatrač radi i prikazuje poruku u konzoli.
Zaključak
Nakon čitanja ovog posta, gledanja i izračunavanja dubokih ili ugniježđenih struktura podataka u Vueu.js više nije težak. Naučili smo kako promatrati promjenu vrijednosti u objektu ili nizu i izvršavati neke zadatke uz pomoć svojstva “deep” Vue.js.
