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

路易达蒙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>

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

番长前端2020/03/13 15:39:25

将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
   }
}

神无StafanTom2020/03/13 15:39:25

可能为时已晚。只要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);
   }
}

小胖TonyLEY2020/03/13 15:39:25

您可以简单地使用

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

和

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

vue方法对象

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer