使用Vue.js从文本输入中按Enter键时阻止表单提交

Question

我在我的应用程序中使用Vue.js并在表单中输入文本

<div id="myVueForm">
<form>
   <input type="text"  v-on="keyup:addCategory | key 'enter'">

   <!-- more form fields -->
   <button type="submit">Submit Form</button>
</form>
</div>

在我的Vue实例中,我有以下内容

new Vue({
    el: '#myVueForm',

    methods: {
        addCategory: function(e)
        {
           if(e) e.preventDefault();
           console.log("Added a new category, thanks!");
        }
    }
});

尽管有这样的preventDefault();调用,当用户在文本输入上按下输入时,表单仍然提交(尽管addCategory()方法确实触发).这种行为可以在这个小提琴中得到证明.

我知道我可以使用jQuery来捕获事件并阻止提交,但我想看看Vue是否可以这样做,因为它似乎是一种常见的用法.

Answer 1

这是Vue.js 2.x的解决方案:

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

Answer 2

提交总是在keydown上解雇.所以使用keydown而不是keyup.

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

Answer 3

为什么不禁用表单提交？

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

Answer 4

您可以使用禁用提交事件：

<form @submit.prevent="">

然后当您需要提交表单时，请使用以下内容：

<button type="submit" @click="mySubmitMethod"> Send </button>

Answer 5

对于那些只是想阻止表单在输入时提交，但不想在输入上触发任何方法的人，您可以简单地执行以下操作：

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

或者在自定义组件上包含native修饰符：

<custom-input type="text" @keypress.enter.native.prevent />

优美易读且简洁。

Answer 6

你可以做Vue.js 1.0:

<input type="text" @keyup.enter.prevent="addCategory">

Answer 7

您可以使用此：

的HTML

<form name="..." @submit.prevent="onSubmitMethod">

JS

methods: {
  onSubmitMethod() {

  }
}