变更事件发生时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>

我正在尝试使用手表，但是在观看年龄范围内的各种物品时我找不到任何帮助.

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

推荐答案

此解决方案假定您仅在处理来自用户输入的更改时才需要旧值，而不是通用模型更改-这可能是案子.在下面，我添加了一个解决方案的草图，以监视是否有必要进行所有更改，尽管也许最好在发生更改的地方而不是在此组件中控制其他更改.

请注意，尽管有点神奇，v模型，但>本质上是用于在用户输入事件(...)上更新数据的语法糖.因此，您可以删除它并直接处理事件，而不会造成太大的伤害.

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模型的实际用途.

就是这样，它应该可以解决问题.如果需要防止更改，则可以忽略分配，但是需要重置输入值. Vue.set(item, 'age', item.age)中的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中，而不是普通的<input>中，您放置了另一个组件，例如<my-item>.您将v-model=item放在上面.在组件内部，创建<input>并将value道具转发到该组件，以及在外部转发它的input/change事件.在组件中，单个项目是单个道具，因此您可以将观察者直接连接到它.相关文档:组件基础，

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屋！