How to Fire an Event When v-model Changes ?

Last Updated : 24 Apr, 2025

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;">GeeksforGeeks</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:

Output1

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;">GeeksforGeeks</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:

Output2

How to close model from a button using vue.js ?

anjalibo6rb0

Improve

Article Tags :

How to Fire an Event When v-model Changes ?

Approach 1: Using @input Event

Syntax:

Approach 2: Using Watcher

Syntax:

Similar Reads

Thank You!

What kind of Experience do you want to share?