Prevent submitting form by pressing the Enter key Vuejs

You have several ways. One is to use @keydown.enter.prevent in <form> . This prevents the submit but also prevents the enter from being used where it was pressed, and perhaps this effect is undesired.

Another way is to use @keydown.enter.stop locally in the input in question, or by creating a div around these inputs and put there to prevent the event from propagating to form .

<form action="/foo">
    <div @keydown.enter.stop>
      <input type="text" v-model="input1" />
      <input type="text" v-model="input2" />
      <textarea v-model="textarea"></textarea>
    </div>
  </form>

And you can add @keydown.enter.stop.prevent to the input field.

<form action="/foo">
      <input type="text" v-model="input" @keydown.enter.stop.prevent/>
      <textarea v-model="textarea"></textarea>
  </form>

 

Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Yes2
No0
Harinder Singh

Harinder Singh

My name is Harinder Singh and I specialize in Software industry. I consider myself as a life learner. I love learning new concepts, embracing new ideas and reading and searching for innovation.