title: Prevent form submitting when pressing enter from a text input, using Vue.js
body: <p>I am using Vue.js in my app and have a text input within a form</p>
  <pre><code>&lt;div id=&quot;myVueForm&quot;&gt;
  &lt;form&gt;
     &lt;input type=&quot;text&quot; v-on=&quot;keyup:addCategory | key 'enter'&quot;&gt;
  
     &lt;!-- more form fields --&gt;
     &lt;button type=&quot;submit&quot;&gt;Submit Form&lt;/button&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  <p>In my Vue instance I have the following</p>
  <pre><code>new Vue({
      el: '#myVueForm',
  
      methods: {
          addCategory: function(e)
          {
             if(e) e.preventDefault();
             console.log(&quot;Added a new category, thanks!&quot;);
          }
      }
  });
  </code></pre>
  <p>Despite the <code>preventDefault()</code> call, when a user presses enter whilst on the text input the form still submits (although the <code>addCategory()</code> method does fire). This behaviour can be demonstrated in <a href="http://jsfiddle.net/Lr3yk13e/4/" rel="noreferrer">this fiddle</a>.</p>
  <p>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.</p>