Vue - 深入观察一系列物体并计算变化？ [英] Vue - Deep watching an array of objects and calculating the change?
问题描述
我有一个名为 people 的数组，其中包含如下对象：
I have an array called people that contains objects as follows:
之前
[
{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岁。
Notice Frank just turned 33.
我有一个应用程序，我正在尝试观看人员阵列以及何时任何值更改然后记录更改：
I have an app where I am trying to watch the people array and when any of the values changes then log the change:
<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>
我的基础是我昨天问过的关于数组比较的问题并选择了最快的工作答案。
I based this on the question that I asked yesterday about array comparisons and selected the quickest working answer.
所以，此时我希望看到以下结果： {id：1，name：'Frank'，年龄：33}
So, at this point I expect to see a result of: { id: 1, name: 'Frank', age: 33 }
但我回到控制台的所有内容都是（记住我在一个组件中有它）：
But all I get back in the console is (bearing in mind i had it in a component):
[Vue warn]: Error in watcher "people"
(found in anonymous component - use the "name" option for better debugging messages.)
并在 codepen中我做了，结果是一个空数组，而不是改变的对象，这是我所期望的。
And in the codepen that I made, the result is an empty array and not the changed object that changed which would be what I expected.
如果有人能说明为什么这是发生或我在这里出错了然后我非常感谢，非常感谢！
If anyone could suggest why this is happening or where I have gone wrong here then it would be greatly appreciated, many thanks!
推荐答案
旧值和新值之间的比较函数存在一些问题。最好不要将事情复杂化，因为它会在以后增加您的调试工作量。你应该保持简单。
Your comparison function between old value and new value is having some issue. It is better not to complicate things so much, as it will increase your debugging effort later. You should keep it simple.
最好的方法是创建一个 person-component 并在里面分别观察每个人它自己的组件，如下所示：
The best way is to create a person-component and watch every person separately inside its own component, as shown below:
<person-component :person="person" v-for="person in people"></person-component>
请在下面找一个用于观看人员内部组件的工作示例。如果你想在父方面处理它，你可以使用 $ emit 向上发送一个事件，包含 id 修改过的人。
Please find below a working example for watching inside person component. If you want to handle it on parent side, you may use $emit to send an event upwards, containing the id of modified person.
Vue.component('person-component', {
props: ["person"],
template: `
<div class="person">
{{person.name}}
<input type='text' v-model='person.age'/>
</div>`,
watch: {
person: {
handler: function(newValue) {
console.log("Person with ID:" + newValue.id + " modified")
console.log("New age: " + newValue.age)
},
deep: true
}
}
});
new Vue({
el: '#app',
data: {
people: [
{id: 0, name: 'Bob', age: 27},
{id: 1, name: 'Frank', age: 32},
{id: 2, name: 'Joe', age: 38}
]
}
});
<script src="https://unpkg.com/vue@2.1.5/dist/vue.js"></script>
<body>
<div id="app">
<p>List of people:</p>
<person-component :person="person" v-for="person in people"></person-component>
</div>
</body>
这篇关于Vue - 深入观察一系列物体并计算变化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
