Phenquestions
Mengenai pengiraan jenis data bersarang atau dalam seperti tatasusunan atau objek, Vue.js atau bahasa pengaturcaraan lain tidak secara automatik mengesan perubahan hierarki dalam data. Namun, kita semua tahu bahawa Vue.js menyediakan sifat jam tangan dan pengiraan untuk melakukan beberapa pemboleh ubah perubahan. Tetapi mengenai perubahan data bersarang, Vue.js tidak mengesannya. Catatan ini akan belajar melakukan beberapa perubahan dengan menonton data susunan atau objek yang bersarang.
Sebelum belajar menonton data bersarang di Vue.js, mari kita fahami terlebih dahulu bagaimana harta benda jam tangan berfungsi?
Tonton Harta
Properti jam tangan digunakan untuk menonton pemboleh ubah dan membolehkan pengguna melakukan beberapa tugas yang diingini pada perubahan pemboleh ubah.
Contoh: Tonton Pembolehubah
Sebagai contoh, pada perubahan beberapa pemboleh ubah, kita mahu menghiburkan sesuatu. Sintaks untuk menulis kod sedemikian di Vue akan seperti ini:
Ini adalah halaman ujian
Setelah menulis kod di atas, laman web akan menjadi seperti ini.
Sekiranya kita mengklik pada butang, keadaan "boolVar" harus diubah karena atribut klik pada butang, dan jam tangan secara automatik dapat mengesan perubahan pada "boolVar" dan menampilkan rentetan pesan di konsol.
Ia berfungsi dengan baik; mesej "Butang diklik" dipaparkan di konsol.
Tetapi, pemerhati gagal mengesan perubahan dan tidak dipecat ketika menonton susunan atau objek. Mari lihat demonstrasi itu.
Contoh: Menonton Objek
Katakan kita mempunyai objek dalam komponen kita, dan kita ingin memaparkan perubahan yang berlaku di harta benda objek tersebut. Dalam contoh yang diberikan di bawah, saya telah membuat objek dengan nama "objVar," yang berisi dua pasangan nilai kunci, "item" dan "kuantiti". Saya telah membuat butang di mana saya menambah "1" pada kuantiti tag templat. Terakhir, saya menonton objek "objVar" di properti jam tangan dan memaparkan mesej konsol.
Ini adalah halaman ujian
Sekarang, kod ini seharusnya menunjukkan perubahan dalam kuantiti objek. Tetapi, ketika kita melaksanakan kod dan mengklik butang di laman web:
Anda boleh lihat di gif di atas; tiada apa yang berlaku di konsol.
Sebab di sebalik ini adalah bahawa pemerhati tidak melihat jauh ke dalam nilai objek, dan ini adalah masalah sebenar yang akan kita selesaikan sekarang.
Vue.js memberikan sifat mendalam untuk melihat jauh ke dalam nilai objek dan tatasusunan. Sintaks untuk menggunakan harta dalam dan menonton data bersarang adalah seperti berikut:
Dalam sintaks ini, kami telah menetapkan sifat mendalam menjadi benar dan menyusun semula fungsi pengendali ().
Sekarang, setelah menukar kod, jika kita memuat semula halaman web dan klik pada butang:
Di sini anda dapat melihat bahawa pemerhati berfungsi dan memaparkan mesej di konsol.
Kesimpulannya
Setelah membaca catatan ini, menonton dan mengira struktur data yang mendalam atau bersarang di Vue.js tidak sukar lagi. Kami telah belajar bagaimana menyaksikan perubahan nilai dalam objek atau array dan melaksanakan beberapa tugas dengan bantuan harta "dalam" Vue.js.
