Vuejs 在更改事件时获取旧值

Question

请参考我下面的片段。如何获得更改后模型的旧值，在这种情况下是 vuejs 中的年龄？

 var app = new Vue({
  el:"#table1",
  data:{
   items:[{name:'long name One',age:21},{name:'long name Two',age:22}]
  },
  methods:{
    changeAge:function(item,event){
      alert(item.age);
    }
  }
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<table class="table table-cart" id="table1">
   <thead>
     <tr>
       <th>Name</th>
       <th>Age</th>
     </tr>
  </thead>
   <tbody>
     <tr v-for="(item,index) in items">
       <td>{{item.name}} :</td>
       <td>
         <input type="text" name="qty"
                v-model="item.age"
                @change="changeAge(item,$event)">
       </td>
     </tr>
   </tbody>
 </table>

我正在尝试使用手表，但在查看一系列物品的年龄时找不到任何帮助。

原文由 madi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

此解决方案假定您仅在处理来自用户输入的更改时才需要旧值 - 这可能是这种情况，而不是通用模型更改。下面我添加了一个解决方案草图，在必要时观察所有变化，尽管最好在它们发生的地方控制其他变化，而不是在这个组件中。

删除 v-model 并将其替换为手动处理。

重要的是要注意 “虽然有点神奇，但 v-model 本质上是用于更新用户输入事件数据的语法糖 (…)” 。因此，您可以删除它并直接处理事件而不会造成太大伤害，就像您几乎已经做的那样。

首先，将 v-model 替换为 :value 。输入仍会跟随 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
}

注意：您可能想改用 @input，这就是 v-model 实际使用的。

就是这样，它应该可以解决问题。如果您需要阻止更改，您可以省略分配，但是，您需要重置输入值。 item.age = item.age of Vue.set(item, 'age', item.age) 可以解决问题，但我不太确定它会不会。

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

为每个项目创建一个单独的组件实例并在那里创建一个手表

如果您需要查看所有更改。但是，如果您需要它，也许您应该在其他地方而不是这个组件中执行此操作。

我没有准备好所有的细节，所以我只是草稿：在你的 v-for 中，而不是简单的 <input> ，你放置另一个组件，比如 <my-item> .你把 v-model=item 放在上面。 Inside the component, you create the <input> and forward the value prop to it, as well as forward it’s input / change events outside .在您的组件中，单个项目是单个道具，因此您可以直接将观察者附加到它。相关文档： 组件基础知识、 自定义组件 v-model 、 道具。

原文由 Frax 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您不会得到元素 on-change 的旧值，如此 处 所述。此外，在观察对象时，在对象的引用发生变化之前，您无法获得 此处 所述的较旧值。

要解决这些问题，您可以创建一个计算属性，该属性将克隆您的 items 数据，并且您可以在此计算属性上放置一个观察者以了解旧值，请参见下面的工作代码：

 var app = new Vue({
  el:"#table1",
  data:{
   items:[{name:'long name One',age:21},{name:'long name Two',age:22}]
  },
  watch:{
    clonedItems: function(newVal, oldVal){
      alert(JSON.stringify(newVal));
      alert(JSON.stringify(oldVal));
    }
  },
  computed:{
    clonedItems: function(){
       return JSON.parse(JSON.stringify(this.items))
    }
  }
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<table class="table table-cart" id="table1">
   <thead>
     <tr>
       <th>Name</th>
       <th>Age</th>
     </tr>
  </thead>
   <tbody>
     <tr v-for="(item,index) in items">
       <td>{{item.name}} :</td>
       <td>
         <input type="text" name="qty"
                v-model="item.age">
       </td>
     </tr>
   </tbody>
 </table>

原文由 Saurabh 发布，翻译遵循 CC BY-SA 3.0 许可协议