Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.
In this article, we’ll look at how to handle various events with Vue.js and modify an event handler’s behavior.
Listening to Events
We can use the v-on directive to listen to DOM events and run some JavaScript code when they’re triggered.
For example, we can use it as follows:
src/index.js :
new Vue({
el: "#app",
data: {
count: 0
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<button v-on:click="count += 1">Add 1</button>
<p>Count: {{count}}</p>
</div>
<script src="src/index.js"></script>
</body>
</html>
Then when we click Add 1, the count increases by 1.
Method Event Handlers
We can also run methods when an event is triggered. This helps us a lot because we might need to runs lots of code when an event happens, so we can’t put it all in an expression in the template.
For example, we can set a method as the value of the v-on:click as follows:
src/index.js :
new Vue({
el: "#app",
methods: {
onClick() {
alert("clicked");
}
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<button v-on:click="onClick">Click Me</button>
</div>
<script src="src/index.js"></script>
</body>
</html>
Then when Click Me is clicked, we get a ‘clicked’ alert box displayed.
Note that we just have to pass in the function reference, we don’t have to call it in the v-on:click directive.
Methods in Inline Handlers
In addition to passing in the method reference, we can also call methods directly with the v-on:click directive.
For example, we can write the following:
src/index.js :
new Vue({
el: "#app",
methods: {
onClick(message) {
alert(message);
}
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<button v-on:click="onClick('hi')">Say Hi</button>
</div>
<script src="src/index.js"></script>
</body>
</html>
We’ll get an alert box that says ‘hi’ when we click Say Hi.
Sometimes we have to access the original DOM element that triggered the event. We can use the $event object to do this.
The $event object has the triggered event’s data, which includes the DOM element that triggered the event.
For example, we can get the ID of the button that was clicked as follows:
src/index.js :
new Vue({
el: "#app",
methods: {
onClick(event, message) {
alert(`${event.target.id} says ${message}`);
}
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<button id="hi-button" v-on:click="onClick($event, 'hi')">Say Hi</button>
</div>
<script src="src/index.js"></script>
</body>
</html>
The code above passes the $event object to the onClick handler, which takes the event parameter, which is set to the $event object and get the ID of the button via event.target.id . The message string is also passed in.
Then alert is called with the string `${event.target.id} says ${message}` so when we click Say Hi, we get an alert box with that says hi-button says hi since the buttons’ ID is hi-button .
Event Modifiers
We can use event modifiers to change the behavior of event handlers.
For example, the .prevent modifier for the v-on directive will automatically run event.preventDefault on the event handler function that’s set as the value.
The .prevent modifier can be used as follows:
<form v-on:submit.prevent="onSubmit"> ... </form>
Then event.preventDefault() will be run when the onSubmit handler is run before the rest of the code for onSubmit is run.
Other event modifiers include:
.stop.capture.self.once.passive
.stop runs event.stopPropagation() before the rest of the event handler code is run.
.capture let us capture the event. That is, when we run the event handler in an inner element, then the same event handler will also run in the outside elements.
For example, if we have the following in src/index.js:
new Vue({
el: "#app",
data: {},
methods: {
onClick() {
alert("clicked");
}
}
});
and the following in index.html :
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head><body>
<div id="app">
<div>
<a v-on:click.capture="onClick"> Click Me </a>
</div>
</div>
<script src="./src/index.js"></script>
</body>
</html>
Then when we click Click Me, we’ll see the ‘clicked’ alert box since the onClick handler is called on the parent div element.
.self will only trigger the event handler if the event.target is the element itself.
.once will trigger an event handler at most once.
For example, if we have the following in src/index.js:
new Vue({
el: "#app",
data: {},
methods: {
onClick() {
alert("clicked");
}
}
});
and the following in index.html :
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<div>
<a v-on:click.once="onClick"> Click Me </a>
</div>
</div>
<script src="./src/index.js"></script>
</body>
</html>
Then we only see the ‘clicked’ alert box once even though we click ‘Click me’ multiple times.
.passive will set the addEventListener ‘s passive option to true . passive set to true means that preventDefault() will never be called.
It’s used for improving performance on mobile devices.
Conclusion
We can set event handlers for DOM element events with thev-on directive.
To use it, we can pass in an expression, event handler method reference, or a call for an event handler as the value of it.
We can also get the data for the event that was triggered by the $event object, where we can get the target element of the event triggered.
Finally, we can add event modifiers to change the behavior of event handlers.
