by Sai gowtham

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

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course