When building a dynamic website, you need to listen for different types of events. To drive these types of interactions on our website or web application, we can use event handling.
There are several different ways to handle events in Vue, but the best solution will depend on the type of event you are listening to, how you want to react to the event, and what you hope to achieve with the event.
For example, if a user clicks a button, submits a form, or even just moves their mouse, you might add a reaction, like showing an animation or calling a function. Adding these types of events provides a rich UX for the end user.
In this article, we’ll cover the basics of handling events in Vue, and we’ll learn how to apply event handling in a real-world application. We’ll learn how to change or prevent an element’s behavior by listening to the event, intercepting it, and handling it using the methods described below.
To understand this tutorial, you should be familiar with events in JavaScript. Let’s get started!
First, let’s look at a common use case of event handling in Vue, creating inline events. With Vue’s native directive v-on
, you can listen to the browser’s native DOM events. In the code block below, we’ll listen to a click event on a button, then change the button’s text:
<template> <div> <button v-on:click='text="Clicked!"'>{text}</button> </div> </template> <script> export default { name: 'InlineEvent', data: function () { return { text: "Click Me" } } } </script>
Alternately, we can call a function to show an alert using the v-on
directive:
<template> <div> <button v-on:click='showAlert'>Show alert</button> </div> </template> <script> export default { name: 'InlineEvent', methods:{ showAlert: ()=>{ alert("Hola, buenos dia") } } } </script>
In both examples above, we added the v-on
directive to the DOM element to intercept its event:
<button v-on:click="eventHandler"></button>
We also added an argument to the v-on
directive, which is the name of the event we want to handle. In our case, the argument is click
.
Next, we’ll bind an expression to the directive, which is typically a method you want to use to handle the event. We’ve called ours eventHandler
and used a shorthand for the v-on
directive:
<button @click="eventHandler"></button>
In our examples so far, we’ve listened to events occurring onclick
. Let’s review a few other popular types of events:
onclick
ondragstart
ondrop
dblclick
onmousedown
onmouseup
mouseover
onkeydown
onkeypress
onkeyup
onchange
onsubmit
onreset
onscroll
onerror
There are more events described in the Vue documentation that you can choose from when designing your application. You should review and experiment with these to make sure your design is as intuitive as possible for the user.
v-on
In Vue, you can use methods called on the element’s v-on
directive, which will contain complex logic that will be executed whenever the event is fired. For example, let’s consider an alert fired onclick
:
<template> <div> <button v-on:click='showAlert("Hello, good morning")'>Show alert</button> </div> </template> <script> export default { name: 'InlineEvent', methods:{ showAlert: (message)=>{ alert(message) } } } </script>
In the code block above, we pass a message to the showAlert
method directly from the v-on
directive. However, we could improve on this code by adding more context to the function. In the code block below, we’ll update the message displayed by showAlert
by concating Hello
with any text passed in the showAlert
function:
<template> <div> <button v-on:click='showAlert("Good Morning!")'>Show alert</button> </div> </template> <script> export default { name: 'InlineEvent', methods:{ showAlert: (message)=>{ alert(`Hello, ${message}`) } } } </script>
Now that we know how to intercept and create a new event, let’s learn how to alter and prevent the default behavior of an event.
In Vue, we can use event modifiers to change an event’s behavior or prevent the default event.
For example, let’s say we have a form containing a button. By default, if the user either clicks the button or presses the enter key, the form will be submitted and the page will be refreshed. In single page applications, we want to avoid fully reloading the page, so we’ll use AJAX to submit the form.
To prevent an event’s default behavior, we can call the .prevent
modifier in Vue, which calls the native event.preventDefault()
method. This series of steps prevents the event from reloading the page after the form is submitted.
On the other hand, the .stop
modifier halts the DOM event’s default behavior completely by calling event.stopPropagation()
. For example, in the following code, we use the .stop
and .submit
modifiers on submit
on the v-on
directive:
<template> <div> <h2>Form</h2> <form v-on:submit.stop.prevent="log('clicked!', $event)"> <button type="Submit"> Click Me </button> </form> </div> </template> <script> export default { name: 'EventModifier', methods: { log(msg, event) { console.log(event.target.tagName, msg); } } } </script>
Both methods perform a similar task and are used together. You can use .prevent
to intercept the default behavior of a form and use .stop
to prevent event bubbling on a parent element.
To change the default behavior, let’s look at the example in the code block below. By default, when a user clicks on the Click Me
link, they’ll see an alert. Then, Google will open in a new tab:
<a href = "http://www.google.com" v-on:click = "alert('Hola, buenos dias')">Click Me</a>
However, if we don’t want to open the link after showing the alert, we can use the .prevent
modifier, as seen below:
<a href = "http://www.google.com" v-on:click.prevent = "alert('Hola, buenos dias')">Click Me</a>
The .prevent
modifier prevents the link from opening and only executes the method assigned to the tag. Now, clicking the button will send an alert message without opening the link.
In our examples, we used the .prevent
modifier in Vue. Let’s take a look at a few other popular modifiers and their functions:
.self
: triggers event only if event.target
is the element itself.once
: prevents the event from executing more than once.keyup
: listens to keyboard events.capture
: handles events that target an inner element before handling the element that triggered the eventKey event modifiers in Vue offer extensive support for listening to the keyboard. For example, we can use key modifiers to listen to events where specific keys are pressed. Note that key names with multiple words are usually written in kebab case.
In the example below, we are listening to the enter
key event:
<input type = "text" v-on:keyup.enter = "alert('Hola, buenos dias!')" />
When the input element above is focused, pressing the enter button will trigger the alert function.
The key event modifier follows the structure v-on.keyevent.keyname
. You can also nest multiple key names like v-on.keyup.ctrl.enter
.
In Vue, the parent component can pass data to its child components through the prop attribute, however, a child component cannot send data to the parent component. However, we can use $emit
to make the parent component listen to the child component and allow the child component to pass data to the parent component.
In the example below, App.vue
, which contains the parent component, is listening to Child.vue
, the child component:
//App.vue (parent component) <template> <div> <child @show-alert="updateAlert"> </child> </div> </template> <script> import Child from "@/components/Child.vue"; export default { components: { Child, }, methods: { updateAlert(item) { alert(item); }, }, }; </script> //Child.vue (child component) <template> <div> <button class="Button" @click="emitAlert('Hello world')">Show alert</button> </div> </template> <script> export default { methods: { emitAlert(item) { this.$emit("show-alert", item); }, updateAlert(item) { alert(item); }, }, }; </script>
Although event handling may seem straightforward, an incorrect or incomplete event handler could clutter your code or even break your application. In this tutorial, we learned about several different ways to handle events in a Vue application.
We covered adding inline events with the v-on
directive and reviewed some of the different types of events we can use to customize our application. We also learned how to prevent or change an event’s default behavior using modifiers. Finally, we covered how to alter communication between our child and parent components using $emit
.
Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps, including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.
The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error and what state the application was in when an issue occurred.
Modernize how you debug your Vue apps — start monitoring for free.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up nowBuild scalable admin dashboards with Filament and Laravel using Form Builder, Notifications, and Actions for clean, interactive panels.
Break down the parts of a URL and explore APIs for working with them in JavaScript, parsing them, building query strings, checking their validity, etc.
In this guide, explore lazy loading and error loading as two techniques for fetching data in React apps.
Deno is a popular JavaScript runtime, and it recently launched version 2.0 with several new features, bug fixes, and improvements […]