Vue.js在发生变更事件时获得旧值

JavaScript

路易达蒙

2020-03-13

请参考下面的代码段。我如何获得更改后的模型的旧值，在这种情况下是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>

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

第1406篇《Vue.js在发生变更事件时获得旧值》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
番长前端 2020.03.13

将v模型替换为值 prop v模型是双向绑定，它将使您的状态变得复杂，然后在更改事件中手动修改age属性

<input type="text" name="qty"
                :value="item.age"   
                @change="changeAge">



export default {
  change(val) {
     let ov = this.item.age
     let nv = val
     // do something
     // this.item.age = nv
   }
}
神无StafanTom 2020.03.13

可能为时已晚。只要watch对象中的函数名称被命名为要监视的变量，这对我来说就是有效的。它仅监视特定变量。

watch:{
   items: function(newVal, oldVal){
      console.log("New value: "+ newVal + ", Old value: " + oldVal);
   },
   other_variable: function(newVal, oldVal){
      console.log("New value: "+ newVal + ", Old value: " + oldVal);
   }
}
小胖TonyLEY 2020.03.13

您可以简单地使用 

<input type="text" name="qty" v-model="item.age" @change="changeAge($event)">

和

changeAge: function(event){
  item = event.target.value;  // Actual assignment
}

vue方法对象

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android