Vue.js Event Modifiers and Key Modifiers

In last tutorial, we have learned event handling in vuejs; In this the tutorial we are going to learn about event modifiers and key modifiers in Vue.js.

Event Modifiers

Event Modifiers in Vuejs helps us to modify the default behavior of the dom events.

Let’s see some examples.

<template>
   <!-- .prevent modifier used -->
 <form @submit.prevent="handleSubmit">  <input type="text" placeholder="Name" />
  <button>submit</button>
 </form>
</template>

<script>
  export default{
      methods:{
          handleSubmit(){
                 ...//your logic
          }
      }
  }
</script>

In the above code we have added a .prevent modifer to the submit event so that we have stopped the default reloading behavior.

Available Event Modifiers

.stop modifier is used to stop the propagation of the event to its parent.

<button @click.stop="alert('Hello')"></button>

.once modifier only trigger the event once.

<button @click.once="handleClick">Hit me</button>

Here we added a .once modifer to the click event so that the click event only triggers the handleClickmethod one time.

.self modifier only trigger the event when we click on itself.

 <div id="app" @click.self="alert('s');">
    <button>Hit me</button>
 </div>

In above code we have added a .self modifier to the click event so that the alert method only invokes when we click on the div tag.

It doesn’t pass the event down to its child elements.

Key Modifiers

In Vue.js key modifiers helps us to listen the key events.

Examples

<template>
 <form>
  <input placeholder="name" />
  <!--submits the form when a enter key goes up -->  <input placeholder="password" @keyup.enter="login" />
  <button>Login</button>
</form>
</template>

Here we added a .enter key modifer to the keyup Keyboard event so that it triggers the login method when a enter key goes up.

Other available mouse modifiers

Vue provides aliases for the most commonly used key codes when necessary for
 legacy browser support:

.enter
.tab
.delete (captures both “Delete” and “Backspace” keys)
.esc
.space
.up
.down
.left