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

<div id="myVueForm"> <form>    <input type="text" v-on="keyup:addCategory | key 'enter'">     <!-- more form fields -->    <button type="submit">Submit Form</button> </form> </div> 

In my Vue instance I have the following

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

Despite the preventDefault() call, when a user presses enter whilst on the text input the form still submits (although the addCategory() method does fire). This behaviour can be demonstrated in this fiddle.

I know I can use jQuery to catch the event and prevent the submit, but I'd like to see if it's possible in Vue to do this as it seems quite a common usage.

Answer 1

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

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

Answer 2

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

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