Sometimes, we want to fix Vue.js getting old value when in the change event handler.

In this article, we’ll look at how to fix Vue.js getting old value when in the change event handler.

How to fix Vue.js getting old value when in the change event handler?

To fix Vue.js getting old value when in the change event handler, we should remove v-model when we use @change.

For instance, we write

<template>
  <div id="app">
    <input type="text" name="qty" :value="item.age" @change="changeAge" />
  </div>
</template>

<script>
//...
export default {
  //...
  methods: {
    changeAge(val) {
      const ov = this.item.age;
      const nv = val;
    },
  },
  //...
};
</script>

to call changeAge when the change event is emitted from the input with

@change="changeAge" 

then we set the value prop of the input to item.age, which is what we want to show in the input box.

Conclusion

To fix Vue.js getting old value when in the change event handler, we should remove v-model when we use @change.