Events are typically combined with functions, which will not be executed before the event occurs. In this tutorial, we will see how to listen for DOM events that we can use to trigger methods.
Vue allows us to handle events triggered by the user. Handling events helps add interactivity to a web application by responding to the user’s input.
How to Handle Event Handling in Vue.js
Let’s install Vue.js using the Vue CLI by the following command.
vue create event
I am using Vue CLI@3. So, if you have not installed it, uninstall the previous version of CLI and install the latest version of Vue CLI.
Hit the following command to open the project in VSCode.
cd event && code .
Listening to Events
The user can interact with a view via click or mouse over or keyup to trigger an event on DOM elements. Vue.js API provides us with a v-on directive to handle these events.
Let us take an example of a v-on directive. We will add a click event on a button, and when we click that event, one event will be fired, and the counter value will increase by one.
Write the following code inside App.vue file.
<template>
<div id="app">
<label>The Count is: {{count}}</label><br />
<button v-on:click="count++">Add Count</button>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
count: 0
}
}
}
</script>
Save the file and start the dev server.
npm run serve
Go to the http://localhost:8080/
Method Event Handlers
In the above example, we have written the logic inside an expression like this: v-on:click= “count++.” Fortunately, we can also write one method to do the increment, like the following.
<template>
<div id="app">
<label>The Count is: {{count}}</label><br />
<button v-on:click="addCounter()">Add Count</button>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
count: 0
}
},
methods: {
addCounter() {
return this.count++;
}
}
}
</script>
Here, we are incrementing the counter inside the method, which is the most convenient way because the sometimes logic code is large, so it’s a best practice to write the code inside the method. There is also shorthand of v-on syntax.
<button @click="addCounter()">Add Count</button>
Methods in Inline Handlers
Instead of binding directly to the method name, we can also use methods in an inline JavaScript statement:
<template>
<div id="app">
<button v-on:click="greet('hi')">Greet hi</button>
<button v-on:click="greet('what')">Ask what</button>
</div>
</template>
<script>
export default {
name: 'app',
methods: {
greet(value) {
alert(value)
}
}
}
</script>
Event Modifiers
It is a pervasive need to call event.preventDefault() or event.stopPropagation() inside event handlers. We can also do this easily inside methods; it would be better if the functions could be purely about the data logic rather than dealing with the DOM events.
To approach this problem, Vue.js provides event modifiers for v-on. Remember that modifiers are directive postfixes denoted by a dot.
.stop.prevent.capture.self.once.passive
There are frequently used method calls that are made when handling events. Using event modifiers, Vue has made it easier for us to implement these.
For example, event.preventDefault() is the most often called when handling events to prevent the browser’s default behavior like submitting the form?
Instead of having to write these out in the methods, we can use the modifiers provided by the vue-on directive.
<button @click.prevent="greet('what')">Ask what</button>
The other examples are the following.
<!-- the click event's propagation will be stopped --> <a v-on:click.stop="doThis"></a> <!-- the submit event will no longer reload the page --> <form v-on:submit.prevent="onSubmit"></form> <!-- modifiers can be chained --> <a v-on:click.stop.prevent="doThat"></a> <!-- just the modifier --> <form v-on:submit.prevent></form> <!-- use capture mode when adding the event listener --> <!-- i.e. an event targeting an inner element is handled here before being handled by that element --> <div v-on:click.capture="doThis">...</div> <!-- only trigger handler if event.target is the element itself --> <!-- i.e. not from a child element --> <div v-on:click.self="doThat">...</div>
Key Modifiers
We can also listen for keyboard events; we often need to check for standard key codes. Vue also allows adding key modifiers for v-on when listening for key events:
<input v-on:keyup.13="submit">
Remembering all the keyCodes is a hassle, so Vue provides aliases for the most commonly used keys:
<!-- same as above --> <input v-on:keyup.enter="submit"> <!-- also works for shorthand --> <input @keyup.enter="submit">
Here is the full list of the key modifier aliases:
.enter.tab.delete.esc.space.up.down.left.right
That’s it.
