- 在学习vue表单时,表单的提交按钮使用的是一个button标签,同时button也绑定了另外一个方法。该方法在浏览器的console中打印内容。在执行时,打印的内容一闪而过,表单页面也发生了刷新。
<form >
{{ usrname}} ++ {{ psd }}
<input type="text" name="" v-model='usrname'>
<input type="text" name="" v-on:keyup.aaa='sub' v-model='psd'>
<button @click='sub' >提交</button> //此处button未设置type值是问题的关键
</form>
sub:function(){
console.log('123'); //打印123会一闪而过,同时form表单刷新.
}
理论原因
- 在ie中,button的默认type为button,而在其他浏览器中是submit.因此在点击该按钮时,会触发提交操作,并刷新表单页面。
解决办法
- 为button设置type值为button,则不会触发提交操作。若要提交则手动绑定触发方法。
<form >
{{ usrname}} ++ {{ psd }}
<input type="text" name="" v-model='usrname'>
<input type="text" name="" v-on:keyup.aaa='sub' v-model='psd'>
<button type='button' @click='sub' >提交</button> //在此处设置type即可
</form>