javascript - Prevent form submitting when pressing enter from a text input, using Vue.js -


i using vue.js in app , have text input within 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 vue instance have following

new vue({     el: '#myvueform',      methods: {         addcategory: function(e)         {            if(e) e.preventdefault();            console.log("added new category, thanks!");         }     } }); 

despite preventdefault(); call, when user presses enter whilst on text input form still submits (although addcategory() method fire). behaviour can demonstrated in this fiddle.

i know can use jquery catch event , prevent submit, i'd see if it's possible in vue seems quite common usage.

the submit fired on keydown. use keydown instead of keyup.

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

Comments

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -