How to handle the events in Vue
In this post we will give you information about How to handle the events in Vue. Hear we will give you detail about How to handle the events in VueAnd how to use it also give you demo for it if it is necessary.
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>
Hope this code and post will helped you for implement How to handle the events in Vue. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs