Vuejs 在更改事件时获得旧值 [英] Vuejs get old value when on change event

问题描述

请参考我下面的片段.怎么获取修改后模型的旧值，这里是vuejs中的年龄?

Please refer to my snippet below. How can I get the old value of the changed model, in this case is the age in 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>

我正在尝试使用 watch，但我无法在观看一系列项目的年龄方面找到任何帮助.

I am trying to use watch, but I am not able to find any help in watching the age an array of items.

推荐答案

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

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

It is important to note that "although a bit magical, v-model is essentially syntax sugar for updating data on user input events (...)". So without much harm you can remove it and handle the events directly, as you already almost do.

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

First, replace v-model with :value. The input will still follow the item.age updates, but will not update the age automatically.

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

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

Then, in order to actually update the value, add item.age = event.target.value to changeAge, like this:

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) 可能会起作用，但我不太确定它会.

And that's it, it should do the trick. If you need to prevent the change, you can just omit the assignment, however, you need to reset the input value. item.age = item.age of Vue.set(item, 'age', item.age) may do the trick, but I'm not quite sure it will.

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

Note: event.target.value is a string, if you need a number, use parseInt().

如果您需要查看所有更改.但是，如果您需要这样做，也许您应该在其他地方而不是这个组件中这样做.

我还没有准备好所有的细节，所以我只是一般的草稿:在你的 v-for 中，而不是普通的 ，你放置另一个组件，比如 .你把 v-model=item 放在上面.在组件内部，您创建 并将 value 属性转发给它，以及转发它的 input/在外面更改 事件.在您的组件中，单个项目是一个单独的道具，因此您可以直接为其附加一个观察者.相关文档:组件基础、自定义组件 v-model, Props.

I don't have all the details ready, so I'll just the general draft: in your v-for, instead of plain <input>, you place another component, say <my-item>. You put v-model=item on it. Inside the component, you create the <input> and forward the value prop to it, as well as forward it's input/change events outside. In your component single item is a single prop, so you can attach a watcher directly to it. Relevant docs: Component Basics, Customizing Component v-model, Props.

这篇关于Vuejs 在更改事件时获得旧值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！