Vue Element Form组件v-for循环里的表单验证

业务需求:在form表单中对el-form-item进行for循环校验。
1、页面代码

<el-form-item
   v-for="(item, index) in ruleForm.timeRange"
   :key="index"
   label="选择适飞时间段"
   :prop="'timeRange.' + index + '.value'"
   :rules="rules.value"
 ></el-form-item>

2、data数据

ruleForm: {
   timeRange: [
     {
       value: [],
     },
   ],
 }
 rules: {
    value: { required: true, message: '时间段不能为空', trigger: 'change' },
  }

总结:
1、:rules
原来的写法是直接在外层 标签上设置一个总的 :rules 就可以了 ,现在是不仅需要设置总的 :rules ,还需要给 v-for 循环里的标签单独设置 :rules ,。注意要用 rules.value
2、:prop
另外主要就是 :prop 了,注意正常验证表单项是 prop,而这里是 :prop。
:prop=“‘timeRange.’+index+‘.value’” 是拼接的形式,前面是 v-for 绑定的数组,中间是数组索引 index,最后是表单项绑定的 v-model 的名称,然后用点 . 把它们连接起来。这三项都必须保证正确,错一个都无法验证。
3、ruleForm
最后就是要注意,v-for 绑定的数组也必须绑定在 form 对象里,注意上面的 data 里:

ruleForm: {
   timeRange: [
     {
       value: [],
     },
   ],
 }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/890639.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

人工智能和机器学习之线性代数(一)

人工智能和机器学习之线性代数&#xff08;一&#xff09; 人工智能和机器学习之线性代数一将介绍向量和矩阵的基础知识以及开源的机器学习框架PyTorch。 文章目录 人工智能和机器学习之线性代数&#xff08;一&#xff09;基本定义标量&#xff08;Scalar&#xff09;向量&a…

机器视觉AI场景为什么用Python比C++多?

好多开发者在讨论机在机器视觉人工智能领域的时候&#xff0c;纠结到底是用Python还是C&#xff0c;实际上&#xff0c;Python 和 C 都有广泛的应用&#xff0c;选择 Python而不是 C 可能有以下一些原因&#xff1a; 语言易学性和开发效率 语法简洁&#xff1a; Python 语法简…

软考系统分析师知识点十:软件工程

前言 今年报考了11月份的软考高级&#xff1a;系统分析师。 考试时间为&#xff1a;11月9日。 倒计时&#xff1a;27天。 目标&#xff1a;优先应试&#xff0c;其次学习&#xff0c;再次实践。 复习计划第一阶段&#xff1a;扫平基础知识点&#xff0c;仅抽取有用信息&am…

【消息队列】Kafka从入门到面试学习总结

国科大学习生活&#xff08;期末复习资料、课程大作业解析、大厂实习经验心得等&#xff09;: 文章专栏&#xff08;点击跳转&#xff09; 大数据开发学习文档&#xff08;分布式文件系统的实现&#xff0c;大数据生态圈学习文档等&#xff09;: 文章专栏&#xff08;点击跳转&…

【C】C语言常见概念~

C语言常见概念 转义字符 转义字符&#xff0c;顾名思义&#xff0c;转变原来意思的字符 比如 #include <stdio.h> int main() {printf("abcndef");return 0; }输出的结果为&#xff1a; 将代码修改一下&#xff1a; #include <stdio.h> int main(…

Web安全常用工具 (持续更新)

前言 本文虽然是讲web相关工具&#xff0c;但在在安全领域&#xff0c;没有人是先精通工具&#xff0c;再上手做事的。鉴于web领域繁杂戎多的知识点&#xff08;工具是学不完的&#xff0c;哭&#xff09;&#xff0c;如果你在本文的学习过程中遇到没有学过的知识点&#xff0…

《OpenCV计算机视觉》—— 人脸检测

文章目录 一、人脸检测流程介绍二、用于人脸检测的关键方法1.加载分类器&#xff08;cv2.CascadeClassifier()&#xff09;2.检测图像中的人脸&#xff08;cv2.CascadeClassifier.detectMultiscale()&#xff09; 三、代码实现 一、人脸检测流程介绍 下面是一张含有多个人脸的…

了解高可用架构之前——CAP

CAP定理(布鲁尔定理)&#xff0c;在2000年的ACM PODC上提出的猜想 &#x1f4d3;1 CAP理论 理论描述 第一版&#xff1a;any distributed system cannot guaranty C,A and P simultaneously 对于一个分布式计算系统&#xff0c;不可能同时满足一致性(Consistence)、可用性(Ava…

环境、能源主题会议,斯普林格/ IEEE 出版

&#x1f31f;第四届环境污染与治理国际学术会议 (ICEPG 2024) ✅收录率高&#xff0c;EI稳定检索 【往届见刊后1个月内完成检索】 ✅华北水利水电大学主办&#xff0c;院士、校长、杰青等大咖齐聚 ✔会议时间&#xff1a;2024年10月25-27日 ✔会议地点&#xff1a;郑州东站…

苹果AI科学家研究证明基于LLM的模型存在缺陷 因为它们无法推理

苹果公司人工智能科学家的一篇新论文发现&#xff0c;基于大型语言模型的引擎&#xff08;如 Meta 和 OpenAI 的引擎&#xff09;仍然缺乏基本的推理能力。该小组提出了一个新的基准–GSM-Symbolic&#xff0c;以帮助其他人衡量各种大型语言模型&#xff08;LLM&#xff09;的推…

常见开源组件的详解

文章目录 RPCRPC架构和工作流程为什么有了HTTP还要用RPC底层协议数据格式连接管理错误处理 使用场景常见的RPC框架 Web应用框架主要功能常见的Web应用框架Spring Boot (Java)Django (Python)Express.js (Node.js) Redis主要特点应用场景缓存问题Redis集群架构主从复制Redis Clu…

Fiddler配合wireshark解密ssl

环境&#xff1a; win11&#xff08;wireshark&#xff09;--虚拟机win7&#xff08;Fiddler&#xff09;---虚拟机win7&#xff08;HTTPS站点&#xff09; 软件安装问题&#xff1a; 需要.net环境&#xff0c;NDP461-KB3102436-x86-x64-AllOS-ENU.exe。 安装fiddler后安装下…

Excel:vba实现合并工作表(表头相同)

这个代码应该也适用于一些表头相同的工作表的汇总&#xff0c;只需要修改想要遍历的表&#xff0c;适用于处理大量表头相同的表的合并 这里的汇总合并表 total 是我事先创建的&#xff0c;我觉得比用vba代码创建要容易一下&#xff0c;如果不事先创建汇总表就用下面的代码&…

chattts一步步的记录,先跑起来。

0.下载git工具 Git - Downloads (git-scm.com)https://git-scm.com/downloads Download – TortoiseGit – Windows Shell Interface to Githttps://tortoisegit.org/download/ 1.安装 随意&#xff0c;可以安汉化&#xff0c;也可不安。无所谓 2.建个目录&#xff0c;我的上…

qiankun 主项目和子项目都是 vue2,部署在同一台服务器上,nginx 配置

1、主项目配置 1.1 micro.vue 组件 <template><div id"container-sub-app"></div> </template><script> import { loadMicroApp } from qiankun; import actions from /utils/actions.js;export default {name: microApp,mixins: [ac…

python+appium+雷电模拟器安卓自动化及踩坑

一、环境安装 环境&#xff1a;window11 1.1 安装Android SDK AndroidDevTools - Android开发工具 Android SDK下载 Android Studio下载 Gradle下载 SDK Tools下载 这里面任选一个就可以&#xff0c;最终下载完主要要安装操作安卓的工具adb&#xff0c;安装这个步骤的前提是要…

防火墙的三种工作模式:路由模式、透明模式(网桥)、混合模式

防火墙作为网络安全的核心设备之一&#xff0c;扮演着至关重要的角色。它不仅能够有效防御外部网络的攻击&#xff0c;还能保护内部网络的安全。在如今复杂多样的网络环境下&#xff0c;防火墙的部署和工作模式直接影响着网络安全策略的实施效果。防火墙通常可以工作在三种模式…

如何成为 Rust 核心贡献者?Rust 开发的核​​心是什么?Rust 重要技术专家揭秘

10 月 17 - 18日&#xff0c;由 GOSIM 开源创新汇主办、CSDN 承办的 GOSIM CHINA 2024 将在北京盛大启幕。作为 GOSIM 开源年度大会的第三届盛会&#xff0c;本次活动邀请了 60 多位国际开源专家&#xff0c;汇聚了来自全球百余家顶尖科技企业、知名高校及开源社区的技术大咖、…

衡石分析平台系统-分析人员手册

应用创建​ 用户可以通过多种方式创建应用&#xff0c;不同场景下应用创建方法不同。 新建空白应用​ 新建空白应用是新建一个空的应用&#xff0c;应用中没有数据集和仪表盘。 点击应用创作页面右上方的新建应用&#xff0c;新建空白的分析应用和查询应用。 新建的空白应用…

汽车宣传动画渲染怎么做?云渲染加速汽车动画渲染

在汽车行业&#xff0c;宣传动画已成为展示新车型和技术创新的重要工具。高质量的渲染不仅能够吸引观众的眼球&#xff0c;还能有效传达汽车的性能和美学。随着技术的发展&#xff0c;云渲染技术为汽车宣传动画的渲染提供了新的可能性&#xff0c;大大提高了渲染效率和质量。 第…