首页 文章

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

提问于
浏览 次
14

我在我的应用程序中使用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(); 调用，当用户在文本输入时按Enter键时，表单仍然提交（尽管 addCategory() 方法确实触发） . 可以在this fiddle中演示此行为 .

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

javascript html vue.js

6 回答

  • 1

    为什么不禁用表单提交？

    <form v-on:submit.prevent><input .../></form>
    回复于
  • 30

    你可以做的Vue.js 1.0：

    <input type="text" @keyup.enter.prevent="addCategory">
    回复于
  • 9

    你可以用这个：

    HTML

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

    JS

    methods: {
  onSubmitMethod() {

  }
}
    回复于
  • 23

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

    <input type='text' v-on:keydown.enter.prevent='addCategory' />
    回复于
  • 0

    您可以从HTML获取事件并将其发送到Vue，只是为了防止默认，如下所示：

    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();
    },
},
    回复于
  • 18

    提交总是在keydown上发布 . 所以使用keydown而不是keyup .

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

相关问题