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>
相关推荐
仰望星空的凡人9 分钟前
【JS逆向基础】数据库之MongoDB
javascript·数据库·python·mongodb
若梦plus1 小时前
Nuxt.js基础与进阶
前端·vue.js
樱花开了几轉1 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
若梦plus2 小时前
Vue服务端渲染
前端·vue.js
Mr...Gan2 小时前
VUE3(四)、组件通信
前端·javascript·vue.js
给力学长2 小时前
自习室预约小程序的设计与实现
java·数据库·vue.js·elementui·小程序·uni-app·node.js
楚轩努力变强4 小时前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
前端开发爱好者4 小时前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
Fly-ping4 小时前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
接口写好了吗5 小时前
【el-table滚动事件】el-table表格滚动时,获取可视窗口内的行数据
javascript·vue.js·elementui·可视窗口滚动