How to Fire an Event When v-model Changes ?
v-model is the two-way binding directive that mainly creates the connection between the input element and the data property. In this article, we will see how we can fire an event when the v-model directive is changed. We will see the two different approaches with the practical implementation in terms of examples.
These are the two approaches:
Table of Content
- Using @input Event
- Using Watcher
Approach 1: Using @input Event
In this method, we are using the @input event to trigger the changeFn function when the Vue.js v-model binding changes. The changeFn function logs the new value, updates the message in the UI, and gives the message when the input is empty.
Syntax:
<input v-model="msg" @input="changeFn">
Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html><html lang="en"><head> <title>Example 1</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"> </script></head><body> <div id="app"> <h1 style="color: green;">w3wiki</h1> <h3>Approach 1: Using @input Event</h3> <p>Value: {{ msg }}</p> <input v-model="msg" @input="changeFn"> <button @click="resetBtn">Reset Msg</button> <p v-if="isEmpty" style="color: red;"> Please enter a value.</p> </div> <script> new Vue({ el: '#app', data: { msg: '', isEmpty: false }, methods: { changeFn: function () { console.log('Input changed! New value:', this.msg); this.isEmpty = this.msg.trim() === ''; }, resetBtn: function () { this.msg = ''; this.isEmpty = false; } } }); </script></body></html> |
Output:
Approach 2: Using Watcher
In this method, we use the watch property to trigger the watcher function when the v-model binding (which is linked to the msg data property) changes. The watcher increases the cntFn counter value and computes the message showing the input length is even or off.
Syntax:
new Vue({
watch: {
propertyName: function(newValue, oldValue) {
// handler function
}
}
});
Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html><head> <title>Example 2</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"> </script></head><body> <div id="app"> <h1 style="color: green;">w3wiki</h1> <h3>Approach 2: Using Watcher</h3> <p>Value: {{ msg }}</p> <p>Input Change Count: {{ cntFn }}</p> <p>{{ msgLengthmsg }}</p> <input v-model="msg"> </div> <script> new Vue({ el: '#app', data: { msg: '', cntFn: 0 }, watch: { msg: function (newValue, oldValue) { console.log('Input changed! New value:', newValue); this.cntFn++; } }, computed: { msgLengthmsg: function () { return this.msg.length % 2 === 0 ? 'Even Length.' : 'Odd Length.'; } } }); </script></body></html> |
Output:
Contact Us