javascript - event prevent default not working within VueJS instance -

i'm trying disable form submission when enter key pressed. approaches i've tried listed below code , example demo.

example of problem here

desired outcome: focus on input, press down -> down -> enter , should log index of record have selected , stop there.

what's happening: logs expected, reloads page form submits.

html

<form action="/some-action" @submit.stop.prevent="prevent">   <div class="auto-complete" v-cloak>     <div class="ico-input">       <input type="text" name="search" placeholder="enter text" @keyup.prevent="handlekeypress">     </div>     <ul class="raw auto-complete-results">       <li v-for="r in results" @click="loadselection($index)" v-bind:class="{'selected': selectedindex == $index}"><span>{{ r.name }}</span></li>     </ul>   </div> </form> 

js

var autocomplete = new vue({   el: '.auto-complete',   data: {     results: [{name: 'swimming1'}, {name: 'swimming2'}, {name: 'swimming3'}, {name: 'swimming4'}, {name: 'swimming5'}, ],     selectedindex: -1,   },   methods: {     handlekeypress: function(event) {       event.preventdefault();       event.stoppropagation();        var key = event.which;        if ([38, 40].indexof(key) > -1) //handle down arrows.         this.arrownavigation(key);        else if (key == 13) //handle enter keypress         this.loadselection(this.selectedindex);        return false;     },      arrownavigation: function(key, target) {       if (key == 38) //up         this.selectedindex = this.selectedindex - 1 < 0 ? 0 : this.selectedindex - 1;       if (key == 40) //down         this.selectedindex = (this.selectedindex + 1) > (this.results.length - 1) ? 0 : this.selectedindex + 1;     },      loadselection: function(index) {        if (index < 0 || index > this.results.length)         return false;        var selection = this.results[index];       console.log("loading selection", index,selection);     },      prevent: function(event) {       event.preventdefault();       event.stoppropagation();       return false;     },   } }) 

i've tried various syntax approaches on both form/input (switching submit keyup on input)

• v-on:submit="prevent"
• @submit
• @submit.stop
• @submit.prevent
• @submit.stop.prevent="prevent"

i've tried calling following in 2 event handlers aswell returning false them both.

• event.preventdefault()
• event.stoppropagation()

the form still triggers page reload no matter try. can't see wrong turn stackoverflow guide eyes.

thanks

this answer anothjer question suggests forms single input element submitted, not matter do.

and indeed adding input (and hiding it) helped.

https://jsfiddle.net/linusborg/lbq7hf1v/1/

<div class="ico-input">   <input type="text" name="search" placeholder="enter text" @keyup.prevent="handlekeypress">   <input type="text" style="display:none;"> </div> 

browsers stupid.