Ich habe ein Array namens people, das Objekte wie folgt enthält:
Vor
[
{id: 0, name: 'Bob', age: 27},
{id: 1, name: 'Frank', age: 32},
{id: 2, name: 'Joe', age: 38}
]Es kann sich ändern:
Nach dem
[
{id: 0, name: 'Bob', age: 27},
{id: 1, name: 'Frank', age: 33},
{id: 2, name: 'Joe', age: 38}
]Beachten Sie, dass Frank gerade 33 geworden ist.
Ich habe eine App, in der ich versuche, das Personenarray zu beobachten. Wenn sich einer der Werte ändert, protokolliere ich die Änderung:
<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>Ich habe dies auf die Frage gestützt , die ich gestern zu Array-Vergleichen gestellt und die am schnellsten funktionierende Antwort ausgewählt habe.
An diesem Punkt erwarte ich also ein Ergebnis von: { id: 1, name: 'Frank', age: 33 }
Aber alles, was ich zurück in die Konsole bekomme, ist (wenn man bedenkt, dass ich es in einer Komponente hatte):
[Vue warn]: Error in watcher "people"
(found in anonymous component - use the "name" option for better debugging messages.)Und in dem Codepen, den ich erstellt habe , ist das Ergebnis ein leeres Array und nicht das geänderte Objekt, das sich geändert hat, was ich erwartet hätte.
Wenn jemand vorschlagen könnte, warum dies geschieht oder wo ich hier falsch gelaufen bin, wäre er sehr dankbar, vielen Dank!