vue使用elementUI表单出现在输入框表单回车刷新页面问题

最新推荐文章于 2023-10-24 11:45:00 发布
最新推荐文章于 2023-10-24 11:45:00 发布
阅读量447 收藏
点赞数
文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44801790/article/details/129745907
版权

今天项目中出现一个bug，vue项目中使用elementUI表单出现了在输入框表单回车后输入框内容被清空。
忽然想起来，之前带学生写项目的时候，出现了在列表页面中头部的条件筛选框只有一个输入框时回车会刷新页面，此时的输入框是放到一个form标签里的，当直接放到一个div里面，没有from时不会出现输入框内回车刷新页面的问题。
查询资料发现，当一个form表单里只有一个输入框时，输入框内回车默认触发表单的提交submit事件。
解决： 阻止表单的提交事件

<el-form @submit.native.prevent="" >
浮桥
关注
解决vue+element 键盘回车事件导致页面刷新的问题
10-18
在使用Vue.js结合Element UI开发Web应用时，我们可能会遇到一个常见问题：在表单中通过键盘回车键触发输入事件后，页面发生刷新。这个问题通常是由于W3C标准中关于表单的默认提交行为导致的。在标准中提到，当一个...
vue+element-plus组件，文本框输入内容按Enter键页面刷新问题
qq_52065282的博客
05-19 1435
在el-form表单组件中，el-input组件输入内容后按下Enter键刷新了整个页面，在此之前并没有对Enter键做任何处理当表单中只有一个文本输入框时，按下Enter键会自动提交表单。
ElementUI常用问题积累
QQ_852213985
03-28 1071
1. el-dialog包含el-form，回车查询时，页面刷新 <el-form @submit.native.prevent></el-form> 2. el-input 多层嵌套 无法输入的问题 <el-input v-model="name" @input="oninput"></el-input> oninput() { this.$forceUpdate(); }, 未完待续… ......
el-input嵌套过深，视图不刷新
rawqraq的博客
05-09 562
但是没有达到预期的效果。el-input值会改但是页面看不到效果。解决办法通过给input绑定@input事件，让数组值更新。后来发现，是因为嵌套过深.element ui 的问题。
elementUI 输入框按回车刷新页面分析与解决
先知三日
06-29 2191
注意：如果你发现@keydown.enter.prevent在Element UI的组件中不起作用，那可能是因为组件内部实际上是一个包装了原生的组件，所以你需要使用.native修饰符来监听原生的keydown事件。而当你使用@keydown.enter.native.prevent时，你是在按键被按下的那一刻阻止了默认的表单提交行为，所以它能够有效地阻止表单的提交。在阻止表单提交的情况下，通常使用@keydown.enter更为有效。
vue 回车查询第一次会清空查询条件
逍湘子
07-12 888
vue 容易疏忽的问题,当form只有一个input 文本框回车查询，查询条件会被清空
Vue中的表单绑定（全 gif 演示）
01-08
在Vue.js中，表单绑定是一项核心特性，它允许开发者轻松地实现视图与数据模型之间的双向数据绑定。本文将通过一系列gif演示详细介绍Vue中不同类型的表单元素如何使用`v-model`进行绑定。 首先，最基本的输入绑定是...
详细分析vue表单数据的绑定
10-15
在上面的例子中，输入框的值与 Vue 实例的 `message` 数据属性绑定，当用户在输入框中输入内容时，`message` 的值也会相应更新，反之亦然。 对于单选按钮和复选框，`v-model` 也可以轻松实现绑定。例如，如果我们有...
Vue中实现回车键切换焦点的方法
10-15
但实际情况下，用户需求千变万化，有时候用户会提出使用回车键Enter来切换焦点的需求，这在某些表单操作中非常常见。因此，了解如何在Vue项目中实现回车键切换焦点的功能就变得非常重要。 首先，我们得知道，通常...
ElementUI input输入、button enter回车事件
Cheung1992的博客
10-11 6238
1、ElementUI el-input 点击回车会导致页面刷新，输入内容丢失； 2、el-button点击后，再次按回车会重复触发； 3、如何实现多个输入框回车触发同一个事件
vue前端——文件类型输入框自动清空 实现及vue cannot set property ‘value‘ of null报错处理
zoEy的博客
01-13 1434
页面： html代码： 实现：一开始想法是在取消按键里绑定清空方法，仅设置了将上面两个箭头指向的v-model置为 “”,但是报错，再次点击选取文件时，就无法选取同样的文件。错误原因在于，文件输入框作为一个dom，要将文件本身清空，不仅是将name置空。 js代码： this.addModelName = ""; this.modelFileName = ""; 改为： this.addModelName = ""; this.modelFileName = ""; document.
elementui组件如何解决输入框内容清空问题（:ref 绑定控件，$refs 获取控件）
Bling Bling ~~
11-24 4399
111 解决element的表单校验输入框有值但校验未通过的问题 2222 vue的Element组件上传文件el-upload上传成功后清空
ElementUI中input回车触发页面刷新问题及其解决方法
terence的博客
06-05 3446
在日常的开发过程中，你可能会遇到一个问题：在ElementUI的el-form表单中，如果只存在一个el-input输入框，当你输入值后按下回车，页面会发生刷新。这是因为当form元素中只有一个输入框时，按下回车将触发表单的默认提交事件，这是W3C标准的规定。
解决前端vue项目问题：element避免二次触发的回车来刷新页面
意初的博客
09-09 1140
回车时element会二次触发不必要的回车刷新页面，需要加阻止事件即可。
Vue项目input框手动赋值，视图却不更新问题解决
Ruby_zst的博客
02-07 3347
。。
element ui中input在输入一个字符或者删除一个字符就会失去光标
xxx
04-19 852
是绑定的key的原因:key值绑定了name，在v-model的时候，也绑定了name。当修改name的时候，就会造成key值修改，然后对应的DOM也会重新渲染。
element弹出框的表单输入框回车页面刷新解决方案
CHENC0518的博客
07-04 517
1.当我在使用Element进扫码枪录入时，发现当一个表单中的input起到回车事件时，页面会刷新。3.input中使用以下代码监听回车事件和使得聚焦。4.为input绑定ref，使用以下完成聚焦。
【Vue】el-dialog 弹窗以及重刷新代码写法
最新发布
weixin_50223520的博客
10-24 1565
el-dialog 弹窗以及重刷新代码写法
vue+elementUI表单导致页面刷新
Lifelong learning
12-09 1798
vue+elementUI表单导致页面刷新 点击按钮导致整个页面刷新，部分数据没有请求，偶尔会正常，可能和网络请求有关 解决方法：可以在 标签上添加 @submit.native.prevent 或者 给button 添加 type=“button” 属性 Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”。 亲测两种方式均可 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值