使用 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() 方法确实触发）。这种行为可以在 这个 fiddle 中得到证明。

我知道我可以使用 jQuery 来捕获事件并阻止提交，但我想看看在 Vue 中是否可以这样做，因为这似乎很常见。

原文由 harryg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

提交总是在 keydown 时触发。所以使用keydown而不是keyup。

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

原文由 Sebastian Nette 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 bradlis7 发布，翻译遵循 CC BY-SA 3.0 许可协议