Tôi có một mảng được gọi là peoplechứa các đối tượng như sau:
Trước
[
{id: 0, name: 'Bob', age: 27},
{id: 1, name: 'Frank', age: 32},
{id: 2, name: 'Joe', age: 38}
]Nó có thể thay đổi:
Sau
[
{id: 0, name: 'Bob', age: 27},
{id: 1, name: 'Frank', age: 33},
{id: 2, name: 'Joe', age: 38}
]Lưu ý Frank vừa tròn 33 tuổi.
Tôi có một ứng dụng mà tôi đang cố gắng xem mảng người và khi bất kỳ giá trị nào thay đổi, hãy ghi lại thay đổi:
<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>Tôi dựa trên câu hỏi mà tôi đã hỏi ngày hôm qua về so sánh mảng và chọn câu trả lời làm việc nhanh nhất.
Vì vậy, tại thời điểm này, tôi mong đợi sẽ thấy kết quả của: { id: 1, name: 'Frank', age: 33 }
Nhưng tất cả những gì tôi nhận lại được trong bảng điều khiển là (nhớ rằng tôi đã có nó trong một thành phần):
[Vue warn]: Error in watcher "people"
(found in anonymous component - use the "name" option for better debugging messages.)Và trong codepen mà tôi đã thực hiện , kết quả là một mảng trống và không phải đối tượng đã thay đổi đã thay đổi, điều mà tôi mong đợi.
Nếu ai đó có thể gợi ý lý do tại sao điều này lại xảy ra hoặc tôi đã sai ở đâu ở đây thì nó sẽ được đánh giá rất cao, cảm ơn rất nhiều!