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>
相关推荐
学习笔记1012 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
程序员杨工3 小时前
【原创】SpringBoot3+Vue3客户管理系统
vue.js·springboot
theOtherSky5 小时前
element+vue3 table上下左右键切换input和select
javascript·vue.js·elementui·1024程序员节
会联营的陆逊5 小时前
JavaScript 如何优雅的实现一个时间处理插件
javascript
over6975 小时前
浏览器里的AI魔法:用JavaScript玩转自然语言处理
前端·javascript
Amy_cx5 小时前
搭建React Native开发环境
javascript·react native·react.js
代码AI弗森5 小时前
Python × NumPy」 vs 「JavaScript × TensorFlow.js」生态全景图
javascript·python·numpy
疏狂难除6 小时前
关于spiderdemo第二题的奇思妙想
javascript·爬虫
渣渣盟6 小时前
探索Word2Vec:从文本向量化到中文语料处理
前端·javascript·python·文本向量化