Saya mencoba memahami cara menonton dengan benar untuk beberapa variasi penyangga. Saya memiliki komponen induk (file .vue) yang menerima data dari panggilan ajax, memasukkan data ke dalam objek dan menggunakannya untuk membuat beberapa komponen anak melalui v-for directive, di bawah penyederhanaan implementasi saya:
<template>
<div>
<player v-for="(item, key, index) in players"
:item="item"
:index="index"
:key="key"">
</player>
</div>
</template>
... lalu di dalam <script>
tag:
data(){
return {
players: {}
},
created(){
let self = this;
this.$http.get('../serv/config/player.php').then((response) => {
let pls = response.body;
for (let p in pls) {
self.$set(self.players, p, pls[p]);
}
});
}
objek barang seperti ini:
item:{
prop: value,
someOtherProp: {
nestedProp: nestedValue,
myArray: [{type: "a", num: 1},{type: "b" num: 6} ...]
},
}
Sekarang, di dalam komponen "pemain" anak saya, saya mencoba mengawasi variasi properti Item apa pun dan saya menggunakan:
...
watch:{
'item.someOtherProp'(newVal){
//to work with changes in "myArray"
},
'item.prop'(newVal){
//to work with changes in prop
}
}
Ini bekerja tetapi tampaknya agak rumit bagi saya dan saya bertanya-tanya apakah ini cara yang tepat untuk melakukannya. Tujuan saya adalah melakukan beberapa tindakan setiap kali prop
berubah atau myArray
mendapatkan elemen baru atau variasi di dalamnya. Setiap saran akan dihargai.
sumber
"item.someOtherProp": function (newVal, oldVal){
seperti yang disarankan @Ron.keys
bagian dalam objek? Contoh:"item.*": function(val){...}
Jawaban:
Anda dapat menggunakan pengamat dalam untuk itu:
Ini sekarang akan mendeteksi setiap perubahan pada objek dalam
item
array dan penambahan ke array itu sendiri (bila digunakan dengan Vue.set ). Inilah JSFiddle: http://jsfiddle.net/je2rw3rs/EDIT
Jika Anda tidak ingin melihat setiap perubahan pada objek tingkat atas, dan hanya ingin sintaks yang kurang canggung untuk menonton objek bersarang secara langsung, Anda dapat menonton
computed
saja:Inilah JSFiddle: http://jsfiddle.net/oa07r5fw/
sumber
computed
gantinya: jsfiddle.net/c52nda7xwatch: { 'item.foo' : function(newVal, oldVal) { // do work here }}
cantik. Saya suka Vue!Pendekatan lain yang bagus dan yang sedikit lebih elegan adalah sebagai berikut:
(Saya mempelajari pendekatan ini dari @peerbolte dalam komentar di sini )
sumber
ES5
sintaksis. Kita tentu saja dapat berargumen bahwaES2015 method definition
itu sendiri tidak terlalu elegan, tetapi agak merindukan inti dari pertanyaan, yaitu bagaimana menghindari pembungkus nama adalah kutipan. Saya kira kebanyakan orang mengabaikan pertanyaan asli, yang sudah berisi jawabannya, dan sebenarnya mencari sesuatu yang, seperti yang Anda katakan, tidak didokumentasikan dengan sangat baik,VueJs sangat memperhatikan objek anak-anak
sumber
Anda dapat menggunakan "pengamat dinamis":
The
$watch
mengembalikan fungsi unwatch yang akan berhenti menonton jika disebut.Anda juga dapat menggunakan
deep
opsi:Pastikan untuk melihat ke dokumen
sumber
Note that you should not use an arrow function to define a watcher (e.g. searchQuery: newValue => this.updateAutocomplete(newValue)). The reason is arrow functions bind the parent context, so this will not be the Vue instance as you expect and this.updateAutocomplete will be undefined.
Tidak melihatnya disebutkan di sini, tetapi juga memungkinkan untuk menggunakan
vue-property-decorator
pola jika Anda memperluasVue
kelas Anda .sumber
Cara lain untuk menambahkan yang saya gunakan untuk 'meretas' solusi ini adalah dengan melakukan ini: Saya mengatur
computed
nilai terpisah yang hanya akan mengembalikan nilai objek bersarang.sumber
Masalah saya dengan jawaban yang diterima dari menggunakan
deep: true
, adalah bahwa ketika deep-menonton sebuah array, saya tidak dapat dengan mudah mengidentifikasi mana elemen array berisi perubahan. Satu-satunya solusi jelas yang saya temukan adalah jawaban ini, yang menjelaskan cara membuat komponen sehingga Anda dapat menonton setiap elemen array secara terpisah.sumber
oldVal
dannewVal
keduanya merujuk objek yang sama, jadi sama saja). Maksud dari adeep watcher
adalah untuk melakukan sesuatu ketika nilai berubah, seperti memancarkan suatu peristiwa, membuat panggilan ajax dll. Jika tidak, Anda mungkin menginginkan komponen, seperti yang ditunjukkan dalam jawaban Mani.Melacak setiap item yang diubah dalam daftar
Jika Anda ingin menonton semua item dalam daftar dan mengetahui item mana dalam daftar yang diubah, Anda dapat mengatur pengamat khusus pada setiap item secara terpisah, seperti:
Jika daftar Anda tidak langsung dihuni (seperti dalam pertanyaan asli), Anda dapat memindahkan logika keluar
created
ke mana pun dibutuhkan, misalnya di dalam.then()
blok.Menonton daftar yang berubah
Jika daftar Anda sendiri diperbarui untuk memiliki item baru atau dihapus, saya telah mengembangkan pola yang berguna yang "dangkal" menonton daftar itu sendiri, dan secara dinamis menonton / membuka item ketika daftar berubah:
sumber
Tidak ada jawaban untuk saya yang berfungsi. Sebenarnya jika Anda ingin menonton data bersarang dengan Komponen yang dipanggil beberapa kali. Jadi mereka dipanggil dengan alat peraga yang berbeda untuk mengidentifikasi mereka. Sebagai contoh,
<MyComponent chart="chart1"/> <MyComponent chart="chart2"/>
solusi saya adalah membuat variabel status vuex addionnal, yang saya perbarui secara manual untuk menunjuk ke properti yang terakhir diperbarui.Berikut ini adalah contoh implementasi Vuex.ts:
Pada fungsi Komponen apa pun untuk memperbarui toko:
Sekarang pada Komponen apa saja untuk mendapatkan pembaruan:
sumber