在Vue的开发过程中,会发现在给form表单里面的input文本框绑定键盘事件,并同时给提交按钮,button绑定了相同的提交方法,例如:
<form>
<input type="text" v-model.number="price" @keyup.enter="add" /><button @click.prevent="add">xxxx</button>
</form>
此时在点击回车键提交的时候,你会发现add方法被调用了两次,导致这种情况的原因是,因为form表单里面的button标签,默认属性是submit,所以,按下回车键后,提交第一次之后,会再次调用button的submit事件,所以会出现提交两次的情况.
解决方法:只需要给button添加一个button属性即可,这样就可以解决重复触发的问题了
<button type="button" @click.prevent="add">xxxx</button>
