Saya memiliki sebuah array bernama peopleyang berisi objek sebagai berikut:
Sebelum
[
{id: 0, name: 'Bob', age: 27},
{id: 1, name: 'Frank', age: 32},
{id: 2, name: 'Joe', age: 38}
]Itu bisa berubah:
Setelah
[
{id: 0, name: 'Bob', age: 27},
{id: 1, name: 'Frank', age: 33},
{id: 2, name: 'Joe', age: 38}
]Perhatikan bahwa Frank baru saja berusia 33 tahun.
Saya memiliki aplikasi di mana saya mencoba untuk menonton array orang dan ketika salah satu nilai berubah, maka catat perubahannya:
<style>
input {
display: block;
}
</style>
<div id="app">
<input type="text" v-for="(person, index) in people" v-model="people[index].age" />
</div>
<script>
new Vue({
el: '#app',
data: {
people: [
{id: 0, name: 'Bob', age: 27},
{id: 1, name: 'Frank', age: 32},
{id: 2, name: 'Joe', age: 38}
]
},
watch: {
people: {
handler: function (val, oldVal) {
// Return the object that changed
var changed = val.filter( function( p, idx ) {
return Object.keys(p).some( function( prop ) {
return p[prop] !== oldVal[idx][prop];
})
})
// Log it
console.log(changed)
},
deep: true
}
}
})
</script>Saya mendasarkan ini pada pertanyaan yang saya tanyakan kemarin tentang perbandingan array dan memilih jawaban kerja tercepat.
Jadi, pada titik ini saya berharap untuk melihat hasil dari: { id: 1, name: 'Frank', age: 33 }
Tetapi yang saya dapatkan kembali di konsol adalah (mengingat saya memilikinya di sebuah komponen):
[Vue warn]: Error in watcher "people"
(found in anonymous component - use the "name" option for better debugging messages.)Dan pada codepen yang saya buat , hasilnya berupa array kosong dan bukan objek yang diubah yang berubah seperti yang saya harapkan.
Jika ada yang bisa menyarankan mengapa ini terjadi atau di mana saya salah di sini maka itu akan sangat dihargai, terima kasih banyak!