Vuejs get old value when on change event

Question

Please refer to my snippet below. How can I get the old value of the changed model, in this case is the age in vuejs?

Answer 1

You dont get old value of element on-change as explained here. Also when watching an object, you can not get older value as explained here until the reference of object changes.

To work around these you can create a computed property which will be clone of your items data, and you can put a watcher over this computed property to get to know the old value as well, See working code below:

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))
    }
  }
});

   

     

       
Name
       
Age
     
  
   

     

       
{{item.name}} :