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

embedded/2024/11/23 4:22:29/

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

<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.ppmy.cn/embedded/139781.html

相关文章

Flutter通过 Coap发送组播

Flutter发送组播的流程 1.初始化 CoAP 客户端 需要初始化 CoAP 客户端并将其连接到组播地址和端口。您可以使用 CoAP 库提供的类来创建和配置客户端 final client CoapClient(Uri.parse(coap://224.0.1.1:5683), // 组播地址和端口 ); 2.创建 CoAP 请求 创建一个 CoAP 请…

box-sizing

title: box-sizing date: 2024-11-20 18:13:42 tags: css 前端搭建项目经典开局——调制box-sizing的相关内容 box-sizing: border-box; 是CSS&#xff08;层叠样式表&#xff09;中的一个属性&#xff0c;用于改变元素的盒模型&#xff08;box model&#xff09;的计算方式。…

每天五分钟深度学习pytorch:批归一化全连接网络完成手写字体识别

本文重点 前面我们学习了普通的全连接神经网络,后面我们学习了带有激活层的全连接神经网络,本文我们继续进一步升级,我们学习带有批归一化的全连接神经网络,批归一化可以加快神经网络的训练速度,减少过拟合,具体它的原理,大家可以看我们的《每天五分钟深度学习》专栏,…

数据跨网传输无忧:FileLink打造内外网文件传输的安全桥梁

在企业数字化办公过程中&#xff0c;内外网文件传输始终是一个绕不开的话题。如何实现高效、便捷、又安全的文件跨网传输&#xff0c;是许多企业在信息化管理中面临的难题。今天&#xff0c;备受企业青睐的文件传输解决方案 FileLink 为您带来一种全新的跨网文件传输体验&#…

推荐文章:FLUI Framework——打造流畅的微软界面体验

推荐文章&#xff1a;FLUI Framework——打造流畅的微软界面体验 FluiFrameworkBringing standardization to Fluent Design by providing easy-to-use styles and controls项目地址:https://gitcode.com/gh_mirrors/fl/FluiFramework 在追求极致用户体验的今天&#xff0c;开…

【Element Ui】el-checkbox 的 indeterminate 与 v-model 表示 “全选”、“待选”、“不选” 状态

官网链接&#xff1a; https://element-plus.org/zh-CN/component/checkbox.html indeterminate 与 v-model indeterminate 属性用以表示 checkbox 的不确定状态&#xff0c;一般用于实现全选的效果。v-model 是绑定值indeterminate 与 v-model 对应不同值的组合可以改变 che…

Hive调优

hive官方配置url: Configuration Properties - Apache Hive - Apache Software Foundation hive命令和参数配置 hive参数配置的意义: 开发Hive应用/调优时&#xff0c;不可避免地需要设定Hive的参数。设定Hive的参数可以调优HQL代码的执行效率&#xff0c;或帮助定位问题。然…

Spring Boot实现WebSocket详解

文章目录 Spring Boot实现WebSocket详解一、引言二、Spring Boot集成WebSocket1、添加依赖2、配置WebSocket3、创建消息模型4、创建消息处理器5、前端实现 三、实现实时消息传递和群发消息1、实时消息传递2、群发消息 四、总结 Spring Boot实现WebSocket详解 一、引言 在现代…