Vue.js Method Handlers

Last Updated : 24 Jul, 2024

Vue.js Method Handlers are the way to handle the event in Vue.js when the logic for handling is more complex and not feasible to handle by an inline method handler. We use v-on directive and trigger method handler via a function call. We can define a method in the Vue Component which is accessed by the property name which we provide. The Method Handler gets the DOM event object and triggers it as an argument. We can get the DOM element that triggers the event via the following property:

event.target.tagName;

Method & Inline Detection

Vue.js template compiler identifies that event handling is done by method handler or Inline by checking the value of v-on direction. If v-on directive is a valid identifier or valid property access path it is handled by the Method Handler. If not valid identifier it is handled by Inline Handler.

Syntax

<button v-on:Event="Handler">  
    click
</button>

Properties

Event: It is a valid DOM event that can occur in the DOM.
Handler: It is the property name or property access path that is assigned to the handler for an event.

Example 1: In this example, we will use the Method handler to handle the event like onmouse over and click. While, triggering that event, we will render some output in DOM.

HTML

<!--App.vue-->

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

    <h2 v-on:mouseover="over">
          Name: {{ name }}
      </h2>
    <h2 v-on:mouseover="over">
          Course: {{ Course }}
      </h2>
    <h2 v-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 see the MouseIn and MouseOut events and use a Method Handler to handle these events.

HTML

<!-- App.vue -->

<template>
    <h1>GeeksforGeeks</h1>
    <h2>Method Handler</h2>

    <input v-model='name' 
           placeholder='Name' 
           v-bind:style="NameC"
           v-on:mouseenter="In" 
           v-on:mouseout="out" /> <br />
    <input v-model='Course'
           placeholder='Course'
           v-bind:style="CourseC" 
           v-on:mouseenter="In2"
           v-on:mouseout="out2" /><br />

    <button v-on:click="sub">
          Submit
      </button>
    <button v-on:click="fet">
          Fetch Details
      </button>
    <div id="panel"></div>
</template>

<script>

    export default {
        name: 'App',
        data() {
            return { name: '', 
                    Course: '', 
                    NameC: { backgroundColor: "while", 
                            color: 'Black' }, 
                    CourseC: { backgroundColor: "while",
                              color: 'Black' } };
        },
        methods: {
            sub: function () {

                alert("Name : " + this.name + 
                      " Course :" + this.Course + " Submited");
            },
            fet: function () {

                alert(this.name + " is in " + 
                      this.Course + " course")
            },
            In: function () {
                this.NameC.backgroundColor = "Green";
            },
            out: function () {
                this.NameC.backgroundColor = "white"
            },
            In2: function () {
                this.CourseC.backgroundColor = "Green";
            },
            out2: function () {
                this.CourseC.backgroundColor = "white"
            }
        }
    }
</script>

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

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