by Sai gowtham

How to handle the events in Vue

In this tutorial, we are going to learn about event handling in Vue.js with the help of examples.

Vue offers us a special directive called v:on which helps us to register and listen to the dom events, so that whenever an event is triggered the method passed to that event is invoked.

The syntax of the v:on directive.

<!-- v:on:eventname="methodname" -->

<button v:on:click="handleClick">Click</button>

In the above code, we are listening to the click event on the button so that whenever a user is clicked on the button, it invoked the handleClick method.

Counter example

<template>
   <div>
      <h1>{{num}}</h1>
      <button  v-on:click="increment">Increment</button>   </div>
</template>

<script>
   export default{
       data:function(){
           return{
               num:0
           }
       },
       methods:{
           increment:function(){
               this.num=this.num+1
           }
       }
   }
</script>

Passing arguments to the Event handler

Sometimes, Event handler methods can also accept arguments let’s see an example.

<template>
   <div>
       <h1>{{num}}</h1>
       <!-- argument 10 is passed to the `increment method -->
      <button  v-on:click="increment(10)">Increment By 10</button>   </div>
</template>

<script>
   export default{
       data:function(){
           return{
               num:0
           }
       },
       methods:{
           //parameter `value`
           increment:function(value){
               this.num =this.num+value
           }
       }
   }
</script>

Here we created an increment method with one parameter value so that we are passing 10 as an argument to the increment() method.

Acessing default event object

To access the default event object in methods, we need to use a special $event variable offered by the vue.

<template>
   <!-- we are passing a $event variable -->
  <input placeholder="name" v-on:onchange="handleChange($event)" /></template>

<script>
 export default{
     methods:{
         handleChange:function($event){
             console.log($event.target.value)
         }
     }
 }
</script>

Accessing both

we can also access both the event object and arguments inside the event handler method like this.

<template>
   <!-- we are passing argument plus $event variable  -->
  <button v-on:click="hitMe('You hitted me',$event)">    Hit me Hard  </button></template>

<script>
 export default{
     methods:{
         handleChange:function(message,$event){
             $event.preventDefault()
             console.log(message)
         }
     }
 }
</script>

Shorthand syntax

There is also a shorthand syntax for listening to the dom events.

 <!--short hand syntax @eventname="method" -->
<button @click="handleClick"></button>

  <!-- long hand syntax -->
<button v-on:click="handleClick"></button>

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course