When we click a button on the UI, it generates a click event. Depending on the functionality, the click of the button should trigger some specific action. Vue 3 Event Handling allows us to listen and react to the any such event.
Vue 3 event handling uses the v-on directive. We can use this directive to listen to DOM events such as a click and trigger some Javascript code. Event handling in VueJS supports both inline handlers and method handlers.
1 – Inline Event Handling in Vue 3
The easiest event handling approach in Vue 3 is to use inline event handlers.
See below example.
const answer = ref('');<h2>Choose your Answer:</h2>
<button v-on:click="answer = 'YES'">Choose YES</button>
<button v-on:click="answer = 'NO'">Choose NO</button>We can shorten the usage of v-on directive by directly using @click. See below.
<h2>Choose your Answer:</h2>
<button @click="answer = 'YES'">Choose YES</button>
<button @click="answer = 'NO'">Choose NO</button>Basically, inline event handlers are ideal for simple use-cases where we need to execute a single statement. Note that answer is a reactive variable. To read more about them, check out this post on VueJS Reactivity with Composition API.
Notice that we are using Composition API approach. The click handlers work the same way for Options API as well with minor differences on how to declare reactive state variables. Check out this detailed post on Vue 3 Options API vs Composition API for more details.
2 – Method-based Event Handling in Vue 3
The most common approach to handle events in Vue 3 is to use methods as event handlers.
const counter = ref(0)
function increment() {
counter.value++
}<button @click="increment">Increment</button>Here, we are binding a method increment() to the click event. A method handler automatically receives the native DOM Event object as input. We can access the event by changing the method handler signature as below:
const counter = ref(0)
function increment(event) {
alert(event.target.tagName)
counter.value++
}We can access properties from the event object and so something with them if needed.
3 – Calling Methods in Inline Event Handlers
Another interesting use-case is to call event handlers directly from the DOM element. This approach allows us to pass custom method arguments instead of the default DOM event.
See below example:
<button @click="increment(5)">Increment</button>const counter = ref(0)
function increment(num) {
counter.value = counter.value + num
}We pass the number 5 as input to the increment() method. Then, we can access it as an argument within the increment() method body.
4 – Event Argument with Inline Handlers in Vue 3
Another use-case is to access the original DOM event as well as pass custom method argument.
<button @click="increment(5, $event)">Increment</button>const counter = ref(0)
function increment(num, event) {
alert(event.target.tagName)
counter.value = counter.value + num
}5 – Event Modifiers in VueJS
Many times, we need to modify the event’s original working. For example, while submitting a form, we want the control to be handled by our application code instead of the default HTML behaviour.
The v-on directive also provides a facility to provide modifiers.
See below example:
<form @submit.prevent="onSubmit"></form>The above is equivalent to calling event.preventDefault() within the click handler. It is also a neater approach because our actual handler code need not worry about default behaviour and simply focus on the actual logic of our application.
Conclusion
Vue 3 v-on directive allows us to listen to DOM events and perform appropriate action. For simple stuff, we can go with inline handlers within the template itself. However, for more complex logic, we use method-based event handlers. Often, an application will use both types depending on the requirements.
If you have any comments or queries about this post, please feel free to mention them in the comments section below.
0 Comments