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?

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>

I am trying to use watch, but I am not able to find any help in watching the age an array of items.

Solution 1

This solution assumes that you need the old value only when handling the change coming from user input - which is probably the case, and not a generic model change. Below I added a sketch of solution watching all changes in if it's necessary, though perhaps it's better to control the other changes at the places they occur, and not in this component.

Drop v-model and replace it with manual handling.

It is important to note that "although a bit magical, v-model is essentially syntax sugar for updating data on user input events (...)". So without much harm you can remove it and handle the events directly, as you already almost do.

First, replace v-model with :value. The input will still follow the item.age updates, but will not update the age automatically.

<input type="text" name="qty"
       :value="item.age"
       @change="changeAge(item,$event)">

Then, in order to actually update the value, add item.age = event.target.value to changeAge, like this:

changeAge: function(item, event){
  alert(item.age);  // Old value
  alert(event.target.value);  // New value
  item.age = event.target.value;  // Actual assignment
}

Note: you may want to use @input instead, that's what v-model actually uses.

And that's it, it should do the trick. If you need to prevent the change, you can just omit the assignment, however, you need to reset the input value. item.age = item.age of Vue.set(item, 'age', item.age) may do the trick, but I'm not quite sure it will.

Note: event.target.value is a string, if you need a number, use parseInt().

Create a separate component instance for every item and create a watch there

In case you need to watch all the changes. However, if you need that, perhaps you should do that in some other place, not this component.

I don't have all the details ready, so I'll just the general draft: in your v-for, instead of plain <input>, you place another component, say <my-item>. You put v-model=item on it. Inside the component, you create the <input> and forward the value prop to it, as well as forward it's input/change events outside. In your component single item is a single prop, so you can attach a watcher directly to it. Relevant docs: Component Basics, Customizing Component v-model, Props.

Solution 2

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

<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>

Solution 3

It may be too late. This worked for me as long as the function name inside the watch object is named as the variable which is watched. It only watches the specific variable.

watch:{
   items: function(newVal, oldVal){
      console.log("New value: "+ newVal + ", Old value: " + oldVal);
   },
   other_variable: function(newVal, oldVal){
      console.log("New value: "+ newVal + ", Old value: " + oldVal);
   }
}

Solution 4

replace v-model with value prop v-model is two-way binding, it will make your state complex then manually modify age property in change event

<input type="text" name="qty"
                :value="item.age"   
                @change="changeAge">



export default {
  change(val) {
     let ov = this.item.age
     let nv = val
     // do something
     // this.item.age = nv
   }
}

Solution 5

https://vuejs.org/v2/api/#Vue-nextTick

 changeAge() {
             this.$nextTick(() => {
                // here the current values are set, do desired actions
                
            })
}

View more solutions

Comments

[madi]

This means that for all changes this event is going to be fired. I need only for the item.age change event to occur. Your solution is good but is there a way to make it specific? Like if I make a backspace, the event is being fired also

[Saurabh]

@madi one option can be to have a computed property, which returns age, and have watcher on it.

[madi]

The thing is in computed property, we are not able to get the current item. So that is wat that confuses. Cannot believe Vue has such a big limitation

[soarinblue]

return JSON.parse(JSON.stringify(this.items)); changes to this below: let newItems = this.items.slice(0);return newItems; Why returning a copy of the array, which does not work? And Why does yours work?

[Saurabh]

@soarinblue because you are not copying, you are just assigning the same reference to some other variable and returning that variable, so you are returning the same reference, which I am returning a new object after cloning it. You can as well use some other way mentioned here.

[Bernardo Dal Corno]

where is the old value?

[DevonDahon]

If using an input[date], how do you reset the date displayed in the input from te called method ?

[Frax]

You mean, an input with type="date"? I don't think they have a special support in Vue, and you'd have to treat the value as a string there? Perhaps the best option is to find some ready date picker component, that would support v-model - then it's about the same as a usual text input.

[DevonDahon]

@Z.Khullah You should use :value instead of v-model to get the old value. Then use changeAge($event, qty) method to change values.

[DevonDahon]

@Z.Khullah The old value is then in qty and the new one in event.target.value.