変更イベント時に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>