Event Handling

Events are handled using the v-on directive. This directive, or @ for short, contain either an inline handler or a method handler.

Inline Handlers

An inline handler handles the logic within the template. This example is fairly similar to the official docs because it is explained in a straightforward way.

<template>    //v-on directive increments number when clicked    <button @click="number++"> Add </button>    //render number variable    <p> Count is: {{ number }} <p></template><script setup>import { ref } from "vue";//number is reactive as a reflet number = ref(0);</script>

When clicking the button, the number will be incremented and then displayed within the paragraph tag.

Methods

These handlers will involve calling a method from the script. For example, let’s say I want to change an inline styling of a component using a button/method handler:

<template>    <h1> Event Handler </h1>    //style accepts colorChoice for a background color    <p :style="{backgroundColor: colorChoice}"> color background </p>    //v-on click handler function that accepts a parameter    <button @click="changeColor(colorChoice)"> switch color </button></template><script setup>import { ref } from "vue";let colorChoice = ref("green");function changeColor(currentColor) {    //Ternary operator to decide what color    currentColor === "blue" ?        colorChoice.value = "green":        colorChoice.value = "blue"}</script>

In the template, the p tag has an inline style for the background color. Instead of background-color like in CSS, this is instead backgroundColor. The variable colorChoice is inserted as the value for the backgroundColor.

The button is referring to a method called changeColor and accepts a parameter called currentColor. Using a ternary operator (JavaScript), we figure out if the currentColor matches “blue”. If it does, we toggle the color to green. If not, we toggle the color to blue.

Event Modifiers

Vue has created event modifiers to make simple but common adjustments to how your events interact with the browser. The most common of these is event.preventDefault() which prevents the page from refreshing (usually used during form submits).

Instead of including the event.preventDefault() syntax within the method, it can be done inline within the template:

*prevent

<form @submit.prevent> </form>

*passive

This event modifier prevents event.preventDefault() from being called and is used for a smooth scrolling experience on mobile devices.

*once

Only trigger the event once.

*self

Only triggers if the event being called derives from the element itself, not a child of that element.

Just a quick example using the previous method handler example:

<button @click.self="changeColor(colorChoice)">  switch color  <button> Embed button </button></button>

We embed a button within a button just to make the logic explicit.

If you click the button within the button with the text “Embed button”, the method will not fire. Only when click the button itself outside of the “Embed button” will it fire.

<input :keyup.page-down="nextPage"><input :keypress.q="quit">

Some other modifiers:

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right

System Modifiers

These serve as a type of "and" operator. A system modifier must be pressed along with another key or click modifier.

• .ctrl
• .alt
• .shift
• .meta (command key for Macintosh)

<input @keypress.ctrl.q="exit"/>

Mouse Button Modifiers

• .left
• .right
• .middle