BUG1: vue中使用@keyup.enter(@keyup.enter.native)事件,和click事件绑定同一个函数,但是结果却不一样


问题:下图中@keyup.enter事件和click事件绑定了同一个方法,但是触发两个方法后最后的结果却不一样;

click触发绑定事件能正常运行,但是@keyup.enter触发绑定事件就是莫名其妙的结果很奇怪,明明调用的都是同一个函数

经过多次检查输出,发现在触发keyup.enter事件的时候,执行到了我自定义的一个删除函数;what???八竿子打不到边的函数为什么会被执行,为什么会执行这个删除函数,为什么不执行我的修改函数?

带着满脸问号,我去看了我这个函数的调用的地方,就是下面的代码调用的,没毛病,就一个普通的button调用的

然后结合了各路神仙的经验发现,就是@keyup.enter的问题:

1. @keyup.enter的触发会触发form表单的提交,触发当前form表单中button按钮上的事件

测试发现:

1. 当前form表单里面有多个button,只会自动触发第一个button

2. 对form外面的button没有影响

解决:

1. 给button标签加上type=‘button’

2.使用elment ui的button组件 ‘el-button’

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM