el-input绑定点击回车事件意外触发页面刷新
小伙伴们在项目中应该还是比较常用键盘指定按键事件的，尤其是一些筛选条件的通过点击键盘回车按键去触发搜索
例如：
<el-form>
<el-form-item label='条件title'>
<el-input v-model='formData.searchKey' @keydown.enter='search'></el-input>
</el-form-item>
......
</el-form>
产生的问题：
按下回车按键，会触发search方法，但也会造成页面刷新，由于我在页面中并不是每次都能碰到这种情况，以为是偶发性的，后面在弹窗中做了一个表单进行条件筛选，其中e-input还是使用的回车搜索，但每次搜索时都进行页面刷新，造成弹窗关闭，才意识到这种情况不是偶发性的
造成的原因是：
绑定keydown.enter事件到el-input组件中，如果这个输入框在表单中，默认情况下按下回车键会提交该表单，因此，我们在进行回车搜索时，不仅触发了该el-input自定义的搜索事件还触发了el-form的submit也就是表单的提交事件
解决方法
为了解决此方法，我们只需要在该事件上使用.prevent修饰符，.prevent修饰符可以阻止事件的默认事件，因此使用该修饰符可以阻止el-input点击回车触发的submit事件
代码如下：
<el-input v-model='formData.searchKey' @keydown.enter.prevent='search'></el-input>
原文地址：https://blog.csdn.net/weixin_46394325/article/details/143945520
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！