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.