people次のようなオブジェクトを含むと呼ばれる配列があります。
前
[
{id: 0, name: 'Bob', age: 27},
{id: 1, name: 'Frank', age: 32},
{id: 2, name: 'Joe', age: 38}
]それは変わることができます：
後
[
{id: 0, name: 'Bob', age: 27},
{id: 1, name: 'Frank', age: 33},
{id: 2, name: 'Joe', age: 38}
]フランクが33歳になったことに注目してください。
people配列を監視しようとするアプリがあり、値のいずれかが変更されると、変更をログに記録します。
<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>私はこれを、昨日アレイの比較について尋ねた質問に基づいて、最も迅速に機能する回答を選択しました。
したがって、この時点で、次の結果が表示されることを期待しています。 { id: 1, name: 'Frank', age: 33 }
しかし、コンソールに戻るのは次のとおりです（コンポーネントで使用したことを念頭に置いてください）。
[Vue warn]: Error in watcher "people"
(found in anonymous component - use the "name" option for better debugging messages.)そして、私が作成したコードペンでは、結果は空の配列であり、変更された変更されたオブジェクトではなく、私が期待したものになります。
誰かがこれがなぜ起こっているのか、または私がここで間違っているところを示唆できるなら、それは大いに感謝します、ありがとう！