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>

我想使用的手表，但我无法找到看岁时项目数组任何帮助。

Answer 1

您不会获得元素电平变化的旧值，如解释here所述。另外，在观看对象时，不能像解释here那样获得较旧的值，直到对象的引用发生变化。

要解决这些，你可以创建一个计算的属性，它会成为你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>