Vue Event And Key Modifiers

What are they?

Event and Key modifiers allow you to add event functionality directly inline where you define your template. This can help you write cleaner and more accessible code to your site with minimum effort.

let's look at a quick example

<template>
  <div id="app">
      <a href="#" @click="anchorAction">Click for a free rtx 2080</a>
  </div>
</template>

Let's say you're using an anchor tag as a trigger for something on your page but you're not linking to another site or page. You know that clicking on it will instantly go to the top of the page so you need to preventDefault() behavior. Because of this, you add the usual event.preventDefault() to your anchorAction method in your <script>

methods: {
    anchorAction (event) {
        event.preventDefault()
        // other logic
    }    

This is business as usual but in Vue you don't need to do this. You can just add this instead

  <a href="#" @click.prevent="anchorAction">Click for a free Rtx 2080</a>

That .prevent will add the code you just did in your anchorAction method

So this saves you the trouble of having to write event.preventDefault() in your component which might not be that big of a deal but let's look at another example of modifiers implemented in a modal.

<template>
  <div id="app">
    <div class="overlay" @click="closeModal">
        <section class="modal" @click.stop>
            modal content
        </section>
    </div>
  </div>
</template>

The @click="closeModal" line would close the modal however, we don't want to close it when we click inside of the modal so we stop propagation.
You do not even need to have a method attached to the click event to add the event. All that was added was just @click.stop and it saves you from having to write an entire method just to do this.

available modifiers

Vue has more but these are some common ones you might use

.stop

• By default, clicking on an element will also click on its parent elements. using this will only click on itself and call any methods on the specific element

.prevent

• prevents default behaviour in an event such as submitting a form on input click.

.capture

• Will trigger any parent methods before the child or target elements method ( Capturing phase )

.once

• Allows method in click to only happen once on that element ( Will reset after the element is destroyed )

Chaining modifiers

You also have the option to chain some of these events modifiers

@click.stop.prevent

• will stop propagation and prevent default behaviour

key modifiers

• @keydown.enter
• @keyup.esc
• @click.ctrl

This is where we can add these events to add extra functionality for accessibility to our sites.

For example, if you are creating a custom drop-down element that needs to have native functionality like the select element, We can add key events inline. This would remove the need for extra if statements checking for keyCodes in our logic.

<template>
  <div id="app">
    <div class="myCustomSelect" @keyup.enter="toggleSelect">
      <ul>
        <li>Item 1</li>
        <li>Item 1</li>
      </ul>
    </div>
  </div>
</template>

And just like that, you can add native functionality for your keyboard users. You could even add some more key events such as arrowup and arrowdown for going through the menu items.

Vue has tons of features to make your life as a developer easier by cleaning up your components, And if you have not done so already I highly recommend reading through the Vue documentation for more great examples.

Vue Docs
Vue Event Modifiers