vue学习笔记——Vue3循环生成表单时,对每一行新生成的数据添加表单验证的方法

应用场景:
在form表单内,动态生成一个数组类型的一组数据,要求对生成的每一组数据内容进行表单验证。例如动态添加人员,并对每个人的人员的信息输入框进行表单验证。

解决思路:
把rules的验证规则循环写在element ui的el-form-item的标签上,动态绑定prop的值,使用index生成不同的prop来进行动态绑定。每次添加一个人员的时候,就是增加一个对象push到数组内,进行循环表单验证。

代码实现:

  <div v-for="(data, index) in formData.dataArray" :key="index"><el-form-item class="custom-price" :prop="'dataArray.' + index + '.name'" :rules="rules.name"><el-input v-model="data.name"></el-input></el-form-item></div>

import { reactive, toRefs } from 'vue';const state = reactive({formData:{dataArray:[]},rules:{name: [{required: true, message: '此项目为必填项', trigger: 'change'}],}
})const { formData, rules } = toRefs(state);

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

国产大模型KimiChat起飞了!200万字内测开启,AI助手能力大提升!

会议之眼 快讯 Kimi Chat是北京月之暗面科技有限公司推出的支持输入20万汉字的智能助手产品。其背后的技术是一个体量为千亿参数的大模型。Kimi Chat的推出是月之暗面“登月计划”的一部分&#xff0c;旨在为未来的多模态版本产品提供基础&#xff0c;并最终在大模型领域打造面…

Spring Security之认证过滤器

前言 上回我们探讨了关于Spring Security&#xff0c;着实复杂。这次咱们聊的认证过滤器就先聊聊认证功能。涉及到多方协同的功能&#xff0c;咱分开聊。也给小伙伴喘口气&#xff0c;嘻嘻。此外也是因为只有登录认证了&#xff0c;才有后续的更多功能集成的可能。 认证过滤器…

ES的集群节点发现故障排除指南(1)

本文是ES官方文档关于集群节点发现与互联互通的问题排查指南内容。 英文原文&#xff08;官网&#xff09; 集群节点发现是首要任务 集群互连&#xff0c;重中之重&#xff01; 在大多数情况下&#xff0c;发现和选举过程会迅速完成&#xff0c;并且主节点会长时间保持当选状…

Linux系统安装完成之后如何开启root的ssh登录

Linux系统安装完成之后如何开启root的ssh登录 默认情况下&#xff0c;root用户是没有密码的&#xff0c;而且出于安全考虑&#xff0c;SSH服务不允许root用户直接登录。但在某些情况下&#xff0c;你可能需要以root用户身份通过SSH远程登录服务器&#xff0c;或者为root用户设…

mysql基础4sql优化

SQL优化 插入数据优化 如果我们需要一次性往数据库表中插入多条记录&#xff0c;可以从以下三个方面进行优化。 insert into tb_test values(1,tom); insert into tb_test values(2,cat); insert into tb_test values(3,jerry);-- 优化方案一&#xff1a;批量插入数据 Inser…

生骨肉冻干真的对猫身体好吗?排行榜靠前对猫身体好的生骨肉冻干推荐

随着科学养猫知识的广泛传播&#xff0c;生骨肉冻干喂养正逐渐受到养猫人士的青睐。生骨肉冻干真的对猫身体好吗&#xff1f;生骨肉冻干不仅符合猫咪的饮食天性&#xff0c;还能提供全面均衡的营养&#xff0c;有助于维护猫咪的口腔和消化系统健康。然而&#xff0c;许多猫主人…

Open CASCADE学习|最小二乘法拟合直线

最小二乘法&#xff0c;又称最小平方法&#xff0c;起源于十八世纪的大航海探索时期&#xff0c;发展于天文领域和航海领域。其历史可以追溯到法国科学家马里勒让德于1805年首次提出这一概念&#xff0c;而1809年&#xff0c;高斯在他的著作《天体运动论》中也提出了最小二乘法…

JavaScript中三目运算

三目运算符是JavaScript中常用的一种条件语句&#xff0c;也称为条件运算符。它由问号&#xff08;?&#xff09;和冒号&#xff08;:&#xff09;组成&#xff0c;用于根据条件的真假返回不同的值。在本篇文章中&#xff0c;我将详细介绍三目运算符的语法、用法和实例&#x…

自学新标日第八课 未完结

第八课 单词 因为总是电脑打字 手写不会 以后单词都先自己手写了 晚更&#xff01;&#xff01; 单词假名声调词义プレゼント2礼物チケット&#xff11;门票パンフレット&#xff11;小册子記念品きねんひん&#xff10;纪念品スケジュールひょうすけじゅーるひょう&#xf…

xilinx FPGA 除法器ip核(divider)的学习和仿真(Vivado)

在设计中&#xff0c;经常出现除法运算&#xff0c;实现方法&#xff1a; 1、移位操作 2、取模取余 3、调用除法器IP核 4、查找表 简单学习除法器IP。 网上很多IP翻译文档&#xff0c;不详细介绍&#xff0c;记录几个重要的点&#xff1a; 1、三种算法模式(不同模式所消耗的资…

【Linux 进程概念】

【Linux 进程概念】 冯诺依曼体系结构冯诺依曼结构简要解释&#xff1a;你用QQ和朋友聊天时数据的流动过程 操作系统(OperatorSystem)概念设计OS的目的定位操作系统的上下层都分别是什么如何理解“管理"总结 进程基本概念描述进程-PCBtask_ struct内容 组织进程查看进程通…

大模型围剿战:Kimi如何在免费与盈利之间找到平衡?

文 | 大力财经 在近期的互联网科技领域&#xff0c;一款名为Kimi的国产大型AI模型引起了广泛关注。随着Kimi的火爆&#xff0c;国内的大型科技公司纷纷开始关注并投入到长文本处理技术的竞争中。 阿里巴巴、360等知名企业纷纷宣布了他们的长文本处理能力&#xff0c;分别达到…

网络——套接字编程UDP

目录 端口号 源端口号和目的端口号 认识TCP协议和UDP协议 网络字节序 socket编程接口 socket常见接口 sockaddr结构 UDP socket bind recvfrom sendto 编写客户端 绑定INADDR_ANY 实现聊天功能 端口号 在这之前我们已经说过源IP地址和目的IP地址&#xff0c;还有…

微信小程序的页面制作---常用组件及其属性2

一、标签栏taBar 在全局配置文件app.json中添加taBar配置&#xff0c;可实现标签栏配置。标签栏最少2个&#xff0c;最多5个 &#xff08;1&#xff09;如何配置标签栏&#xff1f; 1》先建多个文件&#xff0c;&#xff08;以我的index&#xff0c;list&#xff0c;myform文…

最近很火的游戏,人渣/SCUM(更新V0.9.517.81845)

包含DLC • SCUM Deluxe • SCUM Deluxe 2 • SCUM Danny Trejo • SCUM Hair Deluxe 1 • SCUM Luis Moncada • SCUM Charms 1 • SCUM Weapon Skins 1 中文设置 OPTIONS-LANGUAGE-中文(简体) 特别提示 • 通过“\SCUM\Binaries\Win64\SCUM.exe”启动游戏 • 如果…

Microsoft Excel 快捷键 (keyboard shortcut - hotkey)

Microsoft Excel 快捷键 [keyboard shortcut - hotkey] References 表格内部换行快捷键 Alt Enter 快速将光标移到表末 Ctrl End 快速将光标移到表首 Ctrl Home References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.net/

人工智能(Educoder)-- 搜索技术 -- 盲目式搜索

第1关&#xff1a;盲目搜索之宽度优先搜索算法 任务描述 本关任务&#xff1a;给定迷宫地图以及在迷宫中的起始位置&#xff0c;利用宽度优先搜索算法求解走出迷宫的最短路径长度&#xff0c;走出迷宫意味着达到迷宫地图的边界&#xff08;所有位置下标0开始&#xff09;。 …

Dockerfile, nginx.conf文件解读

Dockerfile文件 FROM registry.tongdun.me/library/alpine3-nginx:1.0 ENV APPNAMEedith-frontendADD nginx.conf /etc/nginx/ ADD ok.htm /home/admin/ RUN mkdir /home/admin/dist COPY /dist/ /home/admin/dist/ RUN mkdir /home/admin/nginx RUN mkdir /home/admin/nginx/…

水电站泄洪预警广播系统方案

一、行业背景 近年来由于危险河道管理措施不到位&#xff0c;调峰电站泄水风险长期存在&#xff0c;信息通报制度缺失以及民众安全警觉性不高等因素导致的水电站在泄洪时冲走下游河道游客以及人民财产的事故频发。 我司通过物联网、云计算、大数据、人工智能等技术手段&#x…

【电脑装机】笔记本开机启动快捷键汇总

联想 Lenovo 和 ThinkPad 笔记本&#xff1a; 启动项界面快捷键&#xff1a;F12 或者 F2 进 BIOS 快捷键&#xff1a;F2 或者 FnF2 戴尔 Dell 笔记本&#xff1a; 启动项界面快捷键&#xff1a;F12 进 BIOS 快捷键&#xff1a;F2 或者 FnF2 惠普 HP 笔记本&#xff1a; 启…