Sometimes, we want to fire an event when the v-model value changes.
In this article, we’ll look at how to fire an event when the v-model value changes.
Fire an Event When v-model Changes
We can add a change event listener to our input to listen for input value changes.
For instance, we can write:
<input
type="radio"
name="option"
value=""
v-model="status"
v-on:change="onChange"
>
onChange is the name of the change event handler.
We can also replace v-on: with @ for short:
<input
type="radio"
name="option"
value=""
v-model="status"
@change="onChange"
>
Also, we can add a watcher for our model property instead of attach a change event listener.
For instance, we can write:
new Vue({
el: "#app",
data: {
status: ''
},
watch: {
status(val, oldVal) {
console.log(val, oldVal)
}
}
});
With the watch property, we added a watcher for the status variable as indicated by the name.
val has the current value and oldVal has the old value.
Conclusion
We can add a change event listener to our input to listen for input value changes.
