Запретить отправку формы при нажатии ввода из текстового ввода, используя Vue.js

Я использую 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, так как это довольно распространенное использование.

Ответы на вопрос(7)

Ваш ответ на вопрос