by Sai gowtham

Triggering the button click on Enter in Vue

In this tutorial, we are going to learn about how to trigger the button click by pressing an enter key in a input field using Vue.js.

See this example code.

App.vue
<template>
  <div id="app">
    <form>
      <input v-model="name" placeholder="Enter Name">
      <button type="submit" @click="handleSubmit">Save name</button>    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ""    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      alert(this.name);    }
  }
};
</script>

In the above code, we have a form with an input field, button element and the form can be submitted only by clicking on a Save Name button.

Now, let’s learn how can we submit the form by pressing the Enter key in a input field.

Using the key modifiers

In vue.js, key modifiers helps us to change the behavior of the keyboard events.

To trigger the button click on pressing the enter key, we need to use @keyup.enter modifier inside the input field.

The keyup event occurs when a user releases the key (on a keyboard) .enter modifier allows us only submit the form when the enter key is pressed.

App.vue
<template>
  <div id="app">
    <form>
      <input v-model="name" placeholder="Enter Name"
       @keyup.enter="handleSubmit">      <button type="submit" @click="handleSubmit">Save name</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ""    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      alert(this.name);    }
  }
};
</script>

Now our form can be submitted by clicking the Save name button or pressing the Enter key.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
26,545 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)
221,520 students enrolled
44 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)
114,575 students enrolled
21 hours of video content
View Course