Vue.js 在更改事件时获取旧值

This solution assumes that you need the old value only when handling the change coming from user input - which is probably the case, and not a generic model change. Below I added a sketch of solution watching all changes in if it's necessary, though perhaps it's better to control the other changes at the places they occur, and not in this component.

Drop v-model and replace it with manual handling.

重要的是要注意"although a bit magical, v-model is essentially syntax sugar for updating data on user input events (...)".因此，在不造成太大伤害的情况下，您可以删除它并直接处理事件，就像您几乎已经做过的那样.

首先，用:value代替v-model.输入仍将跟随item.age次更新，但不会自动更新年龄.

<input type="text" name="qty"
       :value="item.age"
       @change="changeAge(item,$event)">

然后，为了实际更新该值，将item.age = event.target.value添加到changeAge，如下所示:

changeAge: function(item, event){
  alert(item.age);  // Old value
  alert(event.target.value);  // New value
  item.age = event.target.value;  // Actual assignment
}

Note: you may want to use @input instead, that's what v-model actually uses.

就这样，它应该会起作用.如果需要防止更改，可以省略赋值，但是需要重置输入值.Vue.set(item, 'age', item.age)人中的item.age = item.age人可能会成功，但我不太确定它会成功.

注意:event.target.value是一个字符串，如果需要数字，请使用parseInt().

for each 项目创建一个单独的组件实例，并在其中创建一个手表

In case you need to watch all the changes. However, if you need that, perhaps you should do that in some other place, not this component.

我还没有准备好所有的细节，所以我将只是一个大致的草稿:在v-for中，而不是普通的<input>中，放置另一个组件，比如<my-item>.你在上面加了v-model=item.在组件内部，创建<input>并将valueprops 转发给它，以及转发外部的input/change事件.在您的组件中，单个项目是单个props ，因此您可以将观察者直接连接到它.相关文件:Component BasicsCustomizing Component v-modelProps.