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

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.lryc.cn/news/491073.html

相关文章:

  • Golang的语言特性与鸭子类型
  • 如何在Linux系统中排查GPU上运行的程序
  • VSCode 新建 Python 包/模块 Pylance 无法解析
  • Unet++改进44:添加MogaBlock(2024最新改进模块)|在纯基于卷积神经网络的模型中进行判别视觉表示学习,具有良好的复杂性和性能权衡。
  • 计算机网络(14)ip地址超详解
  • 【C语言】野指针问题详解及防范方法
  • 【SVN和GIT】版本控制系统详细下载使用教程
  • 【Vue】Vue3.0(二十六)Vue3.0中的作用域插槽
  • 神经网络(系统性学习二):单层神经网络(感知机)
  • CTF之密码学(BF与Ook)
  • 【TEST】Apache JMeter + Influxdb + Grafana
  • SpringBoot集成多个rabbitmq
  • 从零开始学习数据库 day0(基础)
  • MongoDB相关问题
  • linux基本命令(1)
  • 【机器学习】超简明Python基础教程
  • 基于信创环境的信息化系统运行监控及运维需求及策略
  • 【Mysql】视图--介绍和作用 视图的创建
  • 【JavaEE初阶 — 多线程】定时器的应用及模拟实现
  • Win10系统开启了文件夹管控(文件夹限制访问)导致软件向系统公共文档目录写入失败的问题排查分享
  • 大数据的数据整合
  • 回溯法经典难题解析
  • LLM的原理理解6-10:6、前馈步骤7、使用向量运算进行前馈网络的推理8、注意力层和前馈层有不同的功能9、语言模型的训练方式10、GPT-3的惊人性能
  • Electron开发构建工具electron-vite(alex8088)添加VueDevTools(VitePlugin)
  • 【C++】static修饰的“静态成员函数“--静态成员在哪定义?静态成员函数的作用?
  • =computed() =ref()
  • webgl threejs 云渲染(服务器渲染、后端渲染)解决方案
  • 【shell编程】函数、正则表达式、文本处理工具
  • 解决 npm xxx was blocked, reason: xx bad guy, steal env and delete files
  • 如何进行高级红队测试:OpenAI的实践与方法