记录：el-form-item中使用v-if导致规则检验不生效的解决办法

最新推荐文章于 2024-05-13 11:44:49 发布
最新推荐文章于 2024-05-13 11:44:49 发布
阅读量1.4k 收藏
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39246667/article/details/119885543
版权

今天在项目中遇到一个问题，需要v-if渲染的 el-form-item组件使用prop设置规则校验时不生效：
在这里插入图片描述
如图，请求链接仅在http协议类型下才有，所以必须使用v-if做条件渲染,但是导致了上述请求链接空时，规则校验未生效。

解决办法，给该el-form-item 设置一个key即可
在这里插入图片描述
在这里插入图片描述

清渡欢LL
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-form表单多项控制校验；el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
i_am_a_div的博客
06-30 7613
el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
el-form 根据条件渲染部分表单校验时报错
Lydia
08-03 977
el-form 根据条件渲染
element 表单中多个select v-if渲染时的诡异问题
最新发布
夏沫之初的博客
05-13 200
element 表单中使用v-if控制多个select时，诡异bug
【element-ui】el-form-item使用v-if导致的问题 , 增加Key
qq_14993591的博客
01-12 895
解决：在 el-form-item 中添加一个属性key，key的值是唯一的（一般key和prop写一样的内容即可，因为rules里面的东西不能重复定义，所以肯定是唯一的。问题：v-if在操作dom时 在根节点上进行的删减 导致 rules 判断的时候 无法取到 v-if 添加进来的prop值。
Vue+Element中的 el-form-item 进行表单验证时 使用 v-if 出现的问题
qq_37330613的博客
09-11 4686
问题描述 使用 Vue + Element 中的 el-form-item 时 用 v-if 处理显示或隐藏 校验规则失效 原因 v-if在操作dom时 在根节点上进行的删减 导致 rules 判断的时候 无法取到 v-if 添加进来的prop值 解决 在 el-form-item 中添加一个属性 key key值只需要是独一无二即可 ...
element表单组件使用v-if控制item显隐时，表单校验不生效的问题
weixin_51409195的博客
11-08 1269
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss"/>此处修改了v-if的条件之后，由显示变隐藏再使其显示，就出现了错误。输入了值以后还是一直提示未输入，尝试修改代码将v-if改成v-show之后突然发现可以了。aaa: [{ required: true, message: "请输入名称", trigger: "blur", }, ],
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
总结来说，当在 `el-tab-pane` 中使用 `v-show` 或 `v-if` 遇到问题时，可以考虑以下几点： 1. 理解 `v-show` 和 `v-if` 的工作原理及其与组件内部实现的交互。 2. 使用 `v-if` 代替 `v-show`，尽管这可能会导致性能...
el-table-infinite-scroll:El-Table无限滚动
05-26
查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-scroll全局引入import Vue from 'vue';import elTableInfiniteScroll ...
vue样式穿透 ::v-deep的具体使用
10-15
总结来说，`::v-deep` 是 Vue 中解决组件样式穿透问题的关键工具，它允许你跨越组件边界去修改特定子组件的样式，同时保持组件的样式隔离。确保正确使用 `::v-deep` 能够帮助你更好地控制和定制 Vue 应用中的样式，...
el-form-renderer:data数据驱动的动态复杂表格解决方案
04-28
形式呈现器目录灵感贡献贡献者执照 介绍 什么el-form-renderer基于element-ui ，但不限于element-ui组件。 在完全继承element-ui的form属性的基础上，进行了扩展。 一些非形式的组件或自定义组件（例如图片上传和RTF...
el-form,当表格校验遇上v-if，怎样处理表格校验不生效的问题
weixin_44490109的博客
12-28 3665
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只是简单的基
el-form表单校验与v-if使用时表单校验失效
qq_49278026的博客
06-08 1620
el-form表单校验与v-if使用时表单校验失效 , el-form校验失效
vue el-form v-if 自定义表单校验失效
HarryWord
02-28 666
花了半天一直在找原因，以为是自己写的问题，结果发现这个是vue 和element 的一个bug， <div v-if="active ==2"> <el-form-item label="名称" prop="title" key="name"> <el-input :maxLength="20" v-model="form.name" placeholder="请输入名称" clearable></el-input> </el
循环el-form-item并动态（表达式）显示el-input的内容
weixin_57024354的博客
03-22 2417
循环el-form-item并动态（表达式）显示el-input的内容
elementUI中的form-item表单使用了v-show进行隐藏，那么提交表单进行表单验证的时候，还会验证这个表单吗
weixin_48975022的博客
05-23 2457
表单元素时，该表单元素仍然会被渲染到 DOM 中，因此在提交表单时，该元素的验证依然会被触发。元素时，它不会被渲染到 DOM 中，因此在提交表单时也不会进行验证。表单元素后禁用其验证，可以考虑使用。例如，下面的示例中，一个。
el-form 表单的循环+v-if
josiecici的博客
04-26 584
表单的循环 <el-form label-width="180px" :model="handleAddForm1" class="handleForm" v-if="six_Target"> <template v-for="(value,key,index) in handleForm1"> <el-form-item :label="value+':'" :key="index" :prop="key">
Vue v-for 和v-if不能同时使用解决方案
lllsj的博客
10-09 3443
Vue v-for 和v-if无法同时使用,在二次封装form表单时候,根据需求:有的form-item 需要隐藏 如下代码:当 form表单需要v-if 判断显示隐藏,第一个代码块无法支持,第二个代码块可以支持. <el-form :size="size" inline :label-width="labelWidth" ...
Element-ui 为什么el-form-item的rules校验规则不生效
星云
10-04 6902
# 原因 ## 错误 ```html <el-form-item :label="label" prop="id"> <el-input v-model="form.id" :placeholder="`请输入${label}`" :rules="rules"/> </el-form-item> ``` ## 改正 ```html <el-form-item :label="label" :rules="rules"
Vue+Element UI表单组件简单验证及二层验证
NIERYM的博客
06-08 1441
基本表单验证： 基本的表单验证需要ref，rules，prop三个关键要素 <template> <div> <el-form :model="form" :rules="rules" ref="ruleForm"> <!-- 第二个rules为自定义的验证规则，命名可自定义 -- ref为组件的注册信息，用于进行表单验证或清除验证，命名可自定义 --> <el-form-item label="自定义表
多个el-form-item嵌套第一个el-form-item输入不了
01-17
根据提供的引用内容，可以看出多个el-form-item嵌套时，第一个el-form-item无法输入的原因是因为在第一个el-form-item中设置了prop属性，该属性用于表单校验，如果不满足校验规则，输入框将无法输入内容。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值