Vuejs nhận giá trị cũ khi thay đổi sự kiện

Question

Vui lòng tham khảo đoạn mã của tôi bên dưới. Làm thế nào tôi có thể nhận được giá trị cũ của mô hình thay đổi, trong trường hợp này là tuổi trong 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>

Tôi cố gắng để sử dụng đồng hồ, nhưng tôi không thể tìm thấy bất kỳ sự giúp đỡ trong việc xem tuổi một loạt các mặt hàng.

Answer 1

Bạn không nhận được giá trị cũ của yếu tố thay đổi như được giải thích here. Ngoài ra khi xem một đối tượng, bạn không thể nhận được giá trị cũ hơn như được giải thích here cho đến khi tham chiếu về các thay đổi đối tượng.

Để làm việc xung quanh những bạn có thể tạo một tài sản tính đó sẽ là bản sao của items dữ liệu của bạn, và bạn có thể đặt một watcher trên tài sản tính này để tìm hiểu các giá trị cũ là tốt, Xem mã làm việc dưới đây:

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>