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.

<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.

<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.