How to use@input Event in JavaScript
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:
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
Contact Us