परिवर्तन घटना पर जब 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>