elementUI Form表单 表单项v-if切换时校验结果还显示

最新推荐文章于 2024-08-01 15:17:49 发布
最新推荐文章于 2024-08-01 15:17:49 发布
阅读量782 收藏
点赞数 4
分类专栏： elementUI 文章标签： javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mammon_yue/article/details/118100633
版权

加个key值即可。

  <el-form-item label="活动内容" v-else prop="content" key="1" >
  	<el-input type="textarea" v-model="ruleForm.content"></el-input>
  </el-form-item>
Mammon_yue
关注
专栏目录
Vue中使用ElementUI的Form组件时使用 v-if 切换时导致表单自动校验问题
鸭绒的博客
04-10 3198
说明：利用ElementUI的Form表单组件实现登录、注册功能，当chooseItem == 0时是登录模块，否则是注册模块，同时也给表单项添加了校验规则。 示例代码： <template> <el-form v-if="chooseItem == 0" :model="loginForm" :rules="loginRules" ref="loginForm" siz
【ElementUI 表单校验】一个 el-form-item 下多个表单校验（循环校验）
前端知识分享喵
06-07 3673
前端开发项目的过程中，批量表单循环校验是很常见的，如上图，动态添加奖励计算规则，把所有的表单放到了一个 el-form-item 下。也可以理解为 el-form-item 做了嵌套，外层当然也可以省略，样式做微调，下面通过代码来详细的看一下。不足之处，多多交流。
element-ui表单校验，使用v-if进行切换显示，表单校验错乱
我是小鹏呀的博客
01-30 1074
问题：在el-form表单校验中，有些表单项是通过v-if控制显示与隐藏，在切换的时候就会出现校验错乱的情况。解决方法：在v-if控制显示的表单项上增加key属性。
Vue中使用Vuetify的v-form组件时使用 v-if 切换时导致表单自动校验问题
QueenLee1的博客
07-21 852
这个问题困扰我好一会,一开始以为是其他因素引起的,后来发现恍然大悟,一直以为循环中需要加key值,解决之后想写一篇文章记录一下,也帮助一下其他人。实现忘记密码功能,在login页面点击忘记密码按钮,进入forgetPassword页面,输入正确邮箱进入修改邮箱界面.两个v-form没有作区分标识,v-if切换时内部误以为是同一个form元素,导致触发校验。使用v-if切换时导致第二个表单自动校验,我写了一个简单的例子,代码如下。给每个v-form添加不同的key值。...
element中使用v-if指令导致表单出现自动验证的问题
riluokk的博客
04-21 2162
当使用了element中的表单验证的时候，需注意是否在同一个标签中使用了 v-if的指令，当时使用了v-if时，切换显示效果时，表单出现了自动验证 解决办法，使用v-show代替，在页面元素不多的话使用v-show代替即可解决表单自动验证的问题，造成这个的原因是因为在element-ui中使用form需要使用ref，当使用ref时，注意避免和v-if使用，避免出现未知的BUG 问题：element...
Vue3 form表单赋值后，input输入框无法输入
最新发布
qq_39691676的博客
08-01 552
原因: 使用reactive生成的响应式数据，在直接赋值时把响应式数据给替换为了普通数据了，导致无法监听数据的变化。Form表单及JS中的使用都需要 “paramr.formUser” 进行调用。
vue el-form 遇上 v-if，表单校验不生效问题
且听风吟的博客
08-18 8470
el-form遇上v-if，表单校验不生效问题
el-form单个表单项校验方法；element-ui表单单个选项校验；el-form单个表单校验
weixin_43286206的博客
08-26 5681
el-form单个表单项校验方法；element-ui表单单个选项校验；el-form单个表单校验 当我们使用element-ui的el-form时，想在提交表单前对其中一个表单进行验证时就可以使用element自带的方法“validateField”
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
10-17
- 在规则切换时，需要先清除旧的提示，然后将新的校验规则应用到对应的表单项上。 - 对于必填项，可以设置一个基础规则数组，将所有必须填写的字段规则统一管理。当切换校验类型时，再将这些基础规则与特定类型的...
vue 使用v-if切换输入框时，导致输入框的数据内容没有清空
учёба
05-30 1883
如果是对加了表单验证的元素进行显示隐藏，当使用 v-show 时，元素隐藏了，但是表单验证依旧存在，valid 永远返回 false。，那便是：添加一个具有唯一值的 key 属性。如果代码中使用上述的进行输入框的切换，由此，vue提供一种方式来表示。
vue 使用element-ui input输入框输入值不变
qq_38427709的博客
01-15 3547
同事在使用el-input组件时，在v-model绑定对象的时候，发现输入不生效 <el-input v-model="model.name" placeholder="请输入内容"></el-input> data() { return { model: {} }， methods: { getData() { model.name = 'zs'; } } } 后来我检查发现是由于在初始化时并未设置name属性，在设置该参数后无法监听参数的改变 &lt
el-form,当表格校验遇上v-if，怎样处理表格校验不生效的问题
weixin_44490109的博客
12-28 3771
1、场景 在实际工作开发中，我们在处理el-form表单校验问题时常会遇到这样一种情况：根据不同的条件，展示不同的el-form-item，这个时候我们就需要考虑表单元素的显示与隐藏。在vue中，控制显示隐藏的有两个指令：v-if和v-show。 【1】两者不同点：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐； 【2】原理：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基
Vue+Element中v-if 表单验证时出现的问题
jslong66的博客
02-07 1864
问题描述： 使用 Vue + Element 中的 el-form-item 做表单切换时， 用 v-if 处理显示或隐藏 ，同一字段校验文本提示错位，校验规则也失效 如图所示： 错乱样式 原因分析： v-if在操作dom时，在根节点上进行的删减 导致rules 判断的时候 无法取到 v-if 添加进来的prop值 解决方案： 1：在 el-form-item 中添加一个属性 key key值要唯一 <el-form-item label="借款金额" prop="applyMoney" :k
vue表格编辑弹出模态框，v-model绑定原有值，在点击关闭或取消编辑时仍然改变了原有的值
qq_34129170的博客
10-30 4461
解决vue中采用v-model双向绑定数据时导致修改了数据后取消编辑，原有数据改变的问题 最近在使用vue，但是之前没有系统地学习过vue，所以都是一边看官方文档，面向百度搜索进行前端开发。最近在对table表格中的某项数据进行修改时遇见了一些问题，在网上看了一下解决方案，但都不太完整，在此整理记录一下，一方面自己记录一下，一方面希望能帮助到像我一样在不断踩坑的vue小白。 问题描述 话不多说，上图。添加数据后，表格中显示如下： 点击编辑时弹出模态框，在模态框中的输入框采用v-model对数据进行双向绑定
Vue+Element中的 el-form-item 进行表单验证时 使用 v-if 出现的问题
qq_37330613的博客
09-11 4756
问题描述 使用 Vue + Element 中的 el-form-item 时 用 v-if 处理显示或隐藏 校验规则失效 原因 v-if在操作dom时 在根节点上进行的删减 导致 rules 判断的时候 无法取到 v-if 添加进来的prop值 解决 在 el-form-item 中添加一个属性 key key值只需要是独一无二即可 ...
解决el-form动态表单切换导致的校验bug
努力努力再努力的博客
09-07 1317
问题描述 ： 在平常项目需求中，常常有el-form表单需要根据条件切换el-form-item的情况发生，这时候容易切换过多导致校验错误定义。解决方式: 在v-if做判断的时候，加上key。类似于这种情况，切换之后 校验还在。
element-ui表单使用v-if进行触发后，表单校验错乱的问题
Heartnottowake的博客
04-28 958
表单有多个元素需要校验，但是其中某些元素是根据另一个元素的值去用v-if控制显示与隐藏,切换值得时候，就会出现校验错乱。解决方法: 给表单的el-form-item去绑定一个key,这样每次刷新验证，就会找对应的key去校验，这是唯一的。
v-if与v-show对表单验证的影响以及解决办法
csdnyp的博客
04-08 3505
v-if与v-show控制元素显隐对表单验证的影响
form表单使用v-if
09-01
引用中提到了使用v-if和v-show来控制form表单的显示和隐藏。使用v-if时，在切换条件下，由于表单项进行渲染，校验规则也没有绑定上，导致校验不会生效。而使用v-show时，即使隐藏了，表单项的校验规则仍然会生成并...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值