Vue.js Listening to Events

Last Updated : 25 Jul, 2024

Vue.js provides the different events that are used to handle user interactions and component communication. To listen to those DOM events, Vue.js provides a v-on directive. We can use the shortened @ symbol in place of the v-on directive. Listening to Events is the programming concept of waiting for an event and in response executing some instruction.

Syntax

<tagname v-on:event="handler" > 
   // Tag data
</tagname>   
Or
<tagname @event="handler">
  // Tag data 
</tagname>

Properties

event: It is an event to which we are listening and trigger our desired instruction when an event occurs.
handler: It is the way in which we handle the occurred event.

The value of the handler can be of the following types:

Inline Handlers: As the name suggests, inline handlers are used in cases where we only want to execute single-line code.

The syntax for the inline handler can be as:

<button v-on:click='x++'> 
    // Given inline handler increase the value of x by 1;
        Increase 
< /button>

Method Handlers: Method handler is used in case we have more lines of instruction, than inline handler and have some raw data to pass to the event handler for the progress of the handler.

 <button v-on:click="submit('sam')">
         Sumbit
</button>

The above code triggers the submit handler with the value 'sam' on the click event on the button marked as Submit. The handler in response does some work to handle the event.

Example 1: In this example, we will trigger an event on mouse over and mouse click event and handle this event using the v-on directive and @ symbol.

HTML

<!-- App.vue -->
<template>
    <h1 v-on:mouseover="over">
          GeeksforGeeks
      </h1>
    <h2 v-on:mouseover="over">
          Method Handler
      </h2>

    <h2 @on:mouseover="over">
          Name: {{ name }}
      </h2>
    <h2 @on:mouseover="over">
          Course: {{ Course }}
      </h2>
    <h2 @on:mouseover="over">
          Age: {{ Age }}
      </h2>
    <h2 v-on:mouseover="over">
          Batch: {{ Batch }}
      </h2>
    <button v-on:click="Pname">
          Print Name
      </button>
    <button v-on:click="Pbatch">
          Print Batch
      </button><br />
    <h2 id="temp"></h2>
</template>

<script>

    export default {
        name: 'App',
        data() {
            return { name: 'Sam', 
                     Course: 'Mtech',
                     Age: '23', 
                     Batch: '5th' };
        },
        methods: {
            Pname: function () {
                alert('Name is ' + this.name)
            },
            Pcourse: function () {
                alert('Course is ' + this.Course)
            },
            Pbatch: function () {
                alert('Batch is ' + this.Batch)
            },
            over: function (event) {
                document.getElementById('temp').innerHTML = 
                  (event.target).innerHTML;
            }

        }

    }
</script>

<style>
    #app {
        text-align: center;
        margin-top: 60px;
    }

    h1 {
        color: rgb(40, 212, 103)
    }
</style>

Output:

Example 2: In this example, we will trigger an event on keyup.enter, keyup.delete, click, and handle this event using v-on directive and @ symbol.

HTML

<!-- App.vue -->
<template>
    <div align="center">
        <h1>GeeksforGeeks</h1>

        <h1>
            Key Modifiers
        </h1>
        Name: 
          <input v-on:keyup.enter="NameEnt"
               @click="N1"
               v-on:keyup.delete="NameDel"
               placeholder="Enter Name" />
        <br />

        Course: 
          <input v-on:keyup.enter="CourseEnt" 
               @click="C1" 
               v-on:keyup.delete="CourseDel"
               placeholder="Enter Course" /> <br />

        Age: 
          <input v-on:keyup.enter="AgeEnt" 
               @click='A1' 
               v-on:keyup.delete="AgeDel" 
               placeholder="Enter Age" /> <br />
        <button v-on:click="submit">
              Submit
          </button>
        <h3>
            {{name}} <br />
            {{ Course }} <br />
            {{ Age }}
        </h3>
    </div>
</template>

<script>
    export default {
        name: "App",
        data() {
            return {
                name: '',
                Course: '',
                Age: ''
            };
        },
        methods: {
            submit: function () {
                alert('Form Submited')
            },
            N1: function () {
                this.name = 'Typing Name...';
            },
            C1: function () {
                this.Course = 'Typing Course...';
            },
            A1: function () {
                this.Age = 'Typing Age...';
            },
            NameEnt: function (event) {
                this.name =
                    'Entered Name is : ' + event.target.value
            },
            NameDel: function () {
                this.name =
                    'Entered Name Deleted'
            },
            CourseEnt: function (event) {
                this.Course =
                    'Entered Course is :' + event.target.value

            },
            CourseDel: function () {
                this.Course = 'Entered Course is Delete'
            },
            AgeEnt: function (event) {
                this.Age = 'Entered Age is :' + event.target.value
            },
            AgeDel: function () {
                this.Age = "Entered Age is Deleted"
            }
        }
    }; 
</script>

<style>
    h1 {
        color: green;
    }
</style>