当前位置: 首页 > article >正文

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>

http://www.kler.cn/a/404101.html

相关文章:

  • 案例精选 | 某知名教育集团基于安全运营平台的全域威胁溯源实践
  • Spark 之 Aggregate
  • [大数据]Trino
  • 解决upload上传之后,再上传没有效果
  • 【java基础】微服务篇
  • SpringBootTest常见错误解决
  • Python数据分析NumPy和pandas(四十、Python 中的建模库statsmodels 和 scikit-learn)
  • 【数据结构】用四个例子来理解动态规划算法
  • 一天速转golang!
  • docker 相关组成
  • 网络中的TCP协议详解
  • vxe-table 打印出货单、自定义打印单据
  • 【2024APMCM亚太杯B题】空调形状优化 模型+代码+论文
  • 什么是 C++ 中的移动语义?它的作用是什么?
  • Apache Maven 标准文件目录布局
  • STM32的中断(什么是外部中断和其他中断以及中断号是什么)
  • Elasticsearch面试内容整理-性能优化
  • mac2024 安装node和vue
  • pymysql模块
  • 【定长滑动窗口】【刷题笔记】
  • MySQL深度剖析-全局锁、表锁、行锁
  • JSON.toJSONString(awards) 全是空 [{}{}{}{}{}]
  • .NET高效下载word文件
  • 23 Jumping Back and Forth
  • debian 如何进入root
  • JS推荐实践