【发布时间】：2017-04-29 08:17:47
【问题描述】：
我有一个名为 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 岁。
我有一个应用程序，我试图在其中查看人员数组，当任何值发生更改时记录更改：
<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>
我基于 question that I asked yesterday 关于数组比较并选择了最快的工作答案。
所以，此时我希望看到以下结果：{ id: 1, name: 'Frank', age: 33 }
但我在控制台中得到的只是（记住我在一个组件中拥有它）：
[Vue warn]: Error in watcher "people"
(found in anonymous component - use the "name" option for better debugging messages.)
在codepen that I made 中，结果是一个空数组，而不是我所期望的改变的对象。
如果有人能提出为什么会发生这种情况或我在这里出错的地方，那么将不胜感激，非常感谢！
【问题讨论】：
-
我对以下所有解决方案的唯一问题是它们会在每次更改时触发，在我的情况下，我想进行数据库 API 调用以仅更新更改的项目。输入的 v-model 会触发 100 次，我想在更改发生时记录更改，但是当用户单击应用更改时将它们保存到数据库中，您将如何处理
-
@PirateApp 不确定我是否完全遵循您的问题，但也许这可以解决您遇到的问题：vuejs.org/v2/guide/forms.html#lazy。您还可以选择通过使用选择/更改事件来触发您的逻辑来更深入地控制发生的事情？没有例子很难说，用来代码提出一个新问题并发布一个链接，我会尽力帮助解决它。
-
这个答案应该会有所帮助。您可以使用计算属性stackoverflow.com/questions/52282586/… 直接查看年龄
标签： javascript vue.js vuejs2