el-input绑定点击回车事件意外触发页面刷新

小伙伴们在项目中应该还是比较常用键盘指定按键事件的,尤其是一些筛选条件的通过点击键盘回车按键去触发搜索

例如:

c 复制代码
<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事件

代码如下:

c 复制代码
<el-input v-model='formData.searchKey' @keydown.enter.prevent='search'></el-input>
相关推荐
小牛itbull10 分钟前
初始化electron项目运行后报错 electron uninstall 解决方法
前端·javascript·electron
rggrgerj1 小时前
Vue3 组件完全指南代码
前端·javascript·vue.js
在逃的吗喽3 小时前
Vue3新变化
前端·javascript·vue.js
Demoncode_y4 小时前
Vue3中基于路由的动态递归菜单组件实现
前端·javascript·vue.js·学习·递归·菜单组件
Never_Satisfied4 小时前
在JavaScript / HTML中,浏览器提示 “Refused to execute inline event handler” 错误
开发语言·javascript·html
Never_Satisfied4 小时前
在JavaScript / HTML中,事件监听的捕获和冒泡阶段解析
开发语言·javascript·html
茶憶4 小时前
uniapp 请求接口封装和使用
vue.js·uni-app
岁月宁静5 小时前
🎨 打造 AI 应用的 “门面”:Vue3.5 + MarkdownIt 实现高颜值、高性能的答案美化组件
前端·javascript·vue.js
码农飞哥5 小时前
AI编程开发系统001-基于SpringBoot+Vue的旅游民宿租赁系统
vue.js·spring boot·毕业设计·ai编程·计算机源码
光影少年5 小时前
vue3新增哪些内容以及api更改了哪些
前端·vue.js·掘金·日新计划