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}
]Frank가 방금 33 살이 된 것을보세요.
사람들 배열을 보려고하고 값이 변경되면 변경 사항을 기록하는 앱이 있습니다.
<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.)그리고 내가 만든 코드 펜 에서 결과는 내가 예상했던대로 변경된 변경된 객체가 아니라 빈 배열입니다.
왜 이런 일이 발생했는지 또는 내가 여기서 잘못되었는지 제안 할 수 있다면 크게 감사하겠습니다. 많은 감사합니다!