Ho chiamato un array people che contiene oggetti come segue:
Prima
[
{id: 0, name: 'Bob', age: 27},
{id: 1, name: 'Frank', age: 32},
{id: 2, name: 'Joe', age: 38}
]Può cambiare:
Dopo
[
{id: 0, name: 'Bob', age: 27},
{id: 1, name: 'Frank', age: 33},
{id: 2, name: 'Joe', age: 38}
]Notate che Frank ha appena compiuto 33 anni.
Ho un'app in cui cerco di guardare l'array di persone e quando uno qualsiasi dei valori cambia, quindi registro la modifica:
<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>Ho basato questo sulla domanda che ho posto ieri sui confronti degli array e selezionato la risposta di lavoro più rapida.
Quindi, a questo punto mi aspetto di vedere un risultato di: { id: 1, name: 'Frank', age: 33 }
Ma tutto quello che ricevo nella console è (tenendo presente che l'avevo in un componente):
[Vue warn]: Error in watcher "people"
(found in anonymous component - use the "name" option for better debugging messages.)E nel codepen che ho creato , il risultato è un array vuoto e non l'oggetto modificato che è cambiato, che sarebbe quello che mi aspettavo.
Se qualcuno potesse suggerire perché questo sta accadendo o dove ho sbagliato qui, sarebbe molto apprezzato, molte grazie!