Prevent form submitting when pressing enter from a text input, using Vue.js

Question

I am using Vue.js in my app and have a text input within a form

   

        
                      

              相关标签:
       
      

Answer 1

The submit is always fired on keydown. So use keydown instead of keyup.

<input type="text"  v-on="keydown:addCategory | key 'enter'">

Answer 2

Here's a solution for Vue.js 2.x:

<input type='text' v-on:keydown.enter.prevent='addCategory' />

Answer 3

This works

 <input type="text" class="form-control" v-model="get_user" @keydown.enter.prevent = "">

Answer 4

why dont just disable the form submission ?

<form v-on:submit.prevent><input .../></form>

Answer 5

You can get event from the HTML and send it to Vue just to preventDefault like so:

HTML

<input type="text" v-on:keydown.13="my_method($event)">

JS

methods: {
    my_method(event){
        // do something
        if (event) event.preventDefault();
        if (event) event.stopPropagation();
    },
},

Answer 6

I had an edge case where an input was within a popup, and the popup was for only part of the form. I wanted to prevent enter from submitting the form while the popup was open, but not altogether. This worked:

<input type="text" @keydown.enter.prevent = "" />