form中表单切换,导致 relus 中的事件无法触发,原因:页面切换不要一直切换DOM,会导致问题,需要都显示出来

news2024/11/15 21:44:35

修改前,因为重复渲染DOM导致绑定rules失效

在这里插入图片描述

修改前代码使用 computed 计算出渲染的DOM,影响rules事件
 <el-form
        ref="form"
        inline
        :model="billDetailCopy"
        :rules="rules"
        size="small"
        label-position="right"
        label-width="110px"
        class="addInvoice-content-input">
        <el-row>
          <el-form-item v-for="(item,index) in filter(ordinaryList)" :key="index" :prop="item.key" :label="item.label" >
		 <el-form-item/>
        <el-form/> 

修改后,将切换的DOM使用v-show都渲染在页面,不会让rules错乱。

在这里插入图片描述

修改后各渲染各的
<el-form
        v-show="billDetailCopy.type === '增值税普通发票'"
        ref="form1"
        inline
        :model="billDetailCopy"
        :rules="rules"
        size="small"
        label-position="right"
        label-width="110px"
        class="addInvoice-content-input">
        <el-row>
          <el-form-item v-for="(item,index) in ordinaryList" :key="index" :prop="item.key" :label="item.label" >
          <el-form-item/>
        <el-form/> 

form 中绑定的 rules 跟两个元素有关,才能触发rules绑定的每一个事件

1、 <el-form-item 绑定的 prop=“aaa” 在 rules中

2、v-model=“aaa” 绑定的 aaa 在 rules 中

参考链接

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

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

相关文章

使用无监督机器学习进行客户细分 -- 机器学习项目基础篇(11)

在今天的时代&#xff0c;公司努力工作&#xff0c;使他们的客户满意。他们推出新的技术和服务&#xff0c;以便客户可以更多地使用他们的产品。他们试图与每一个客户保持联系&#xff0c;以便他们能够相应地提供货物。但实际上&#xff0c;与每个人保持联系非常困难和不现实。…

Springboot项目集成Durid数据源和P6Spy以及dbType not support问题

项目开发阶段&#xff0c;mybatis的SQL打印有占位符&#xff0c;调试起来还是有点麻烦&#xff0c;随想整合P6Spy打印可以直接执行的SQL&#xff0c;方便调试&#xff0c;用的Durid连接池。 Springboot项目集成Durid <dependency><groupId>com.alibaba</group…

【Matlab】极限学习机遗传算法(ELM-GA)函数极值寻优——非线性函数求极值

往期博客&#x1f449; 【Matlab】BP神经网络遗传算法(BP-GA)函数极值寻优——非线性函数求极值 【Matlab】GRNN神经网络遗传算法(GRNN-GA)函数极值寻优——非线性函数求极值 【Matlab】RBF神经网络遗传算法(RBF-GA)函数极值寻优——非线性函数求极值 【Matlab】Elman神经网络遗…

栈和队列 (以及实现)

文章内容 1.栈 2.队列 文章内容 1.栈 1.1栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last I…

软件测试还是测试开发,二者如何选择?

各位小伙伴大家好, 今天和大家分享的是测试和测试开发的选择&#xff0c;相信很多小伙伴在这个问题上也都有过自己的想法&#xff0c;闲言少叙, 咱们进入正题。 一.企业需要哪种人才&#xff1f; 一名优秀的测试工程师是市面上不可多得的人才, 拥有理论和实操能力的测试工程师…

“代言人+合伙人“模式,彻底改变传统的一对一代言活动

小编介绍&#xff1a;10年专注商业模式设计及软件开发&#xff0c;擅长企业生态商业模式&#xff0c;商业零售会员增长裂变模式策划、商业闭环模式设计及方案落地&#xff1b;扶持10余个电商平台做到营收过千万&#xff0c;数百个平台达到百万会员&#xff0c;欢迎咨询。 当今…

MyBatis 实战指南:探索灵活持久化的艺术

文章目录 前言一、初识 MyBatis1.1 什么是 MyBatis1.2 为什么学习 MyBatis 二、MyBatis 在软件开发框架中的定位三、基于 Spring Boot 创建 MyBatis 项目3.1 添加 MyBatis 框架的支持3.2 配置数据库连接信息和映射文件的保存路径&#xff08;Mapper XML&#xff09; 四、MyBati…

8月11日|CSA研讨会:国标要点解读《信息安全技术 个人信息处理中告知和同意实施指南》

随着网络与数据科技的进步&#xff0c;个人信息在AIGC、元宇宙世界等产业中扮演着愈发关键的角色。如何实施告知并取得个人主体同意是个人信息处理的基本前提&#xff0c;对于企业等处理者而言尤为重要。《个人信息保护法》规定了知情同意的原则和一般规则&#xff0c;但仍有不…

网络适配器和MAC地址

点对点信道&#xff1a;由于目的地只有一个选项&#xff0c;所以数据链路层不需要使用地址。 而在广播信道中&#xff1a; 各个主机如何判断信号是不是发给自己的&#xff1f; 当多个主机连接在同一个广播信道上&#xff0c;要想实现两个主机之间的通信&#xff0c;则每个主机都…

字段附加属性

字段附加属性 除了查看、编辑、必填三个基本属性之外,在Html模板中可以对单个字段添加Sql操作,或者进行字段赋值和日期时间计算,这也是Html模板表单的一大特色,如图D5-4-1所示。 D5-4-1 5.5.2、插入sql操作 插入sql操作是通过写sql查询语句的方式将需要的内容查询出来后…

【人工智能前沿弄潮】—— SAM从提示生成物体mask

SAM从提示生成物体mask Segment Anything Model&#xff08;SAM&#xff09;根据指示所需的对象来预测对象掩码。该模型首先将图像转换为图像嵌入&#xff0c;从而可以从提示中高效地生成高质量的掩码。 SamPredictor类为模型提供了一个简单的接口来提示模型。用户可以首先使…

HTML——格式化文本与段落

&#x1f60a;HTML——格式化文本与段落 &#x1f30f;前言&#x1f3ad;HTML文本标签&#x1f3af;主体内容body标签&#x1f3af;标题字标签&#x1f3af;空格和特殊字符 &#x1f3ad;格式化文本标签&#x1f3af;文本修饰标签&#x1f3af;计算机输出标签&#xff08;成对标…

基于MATLAB小波变换的信号突变点检测

之前在不经意间也有接触过求突变点的问题。在我看来&#xff0c;与其说是求突变点&#xff0c;不如说是我们常常玩的"找不同"。给你两幅图像&#xff0c;让你找出两个图像中不同的地方&#xff0c;我认为这其实也是找突变点在生活中的应用之一吧。回到找突变点位置上…

Linux部署Zabbix主机监控

192.168.136.55 服务端 192.168.136.56 客户端 一、服务端 1.1 安装lamp环境 #关闭防火墙以及SELINUX systemctl disable firewalld systemctl stop firewalld sed -i s/SELINUXenforcing$/SELINUXdisabled/g /etc/selinux/config setenforce 0设置yum源 yum install epe…

Cocos Creator 3.8 后期效果 Shader 编写(2/2) 进阶篇

前言 在上一篇文章中&#xff0c;麒麟子给大家分享了如何在 Cocos Creator 3.8 中的自定义管线中&#xff0c;添加属于自己的后期效果 Shader。 但基于 BlitScreen 的方案&#xff0c;我们只能编写最简单后效 Shader&#xff0c;如果我们想要支持更多复杂的 Shader&#xff0c…

pc端与flutter通信失效, Method not found

报错情况描述&#xff1a;pc端与flutter通信&#xff0c;ios端能实现通信&#xff0c;安卓端通信报错 报错通信代码&#xff1a; //app消息通知window.callbackName function (res) {window?.jsBridge && window.jsBridge?.postMessage(JSON.stringify(res), "…

axios的使用和接口请求统一封装处理

axios官网&#xff1a;axios中文网|axios API 中文文档 | axios 简单封装&#xff1a;配置基础路径和超时时间&#xff0c;还有请求拦截器和响应拦截器 //对axios进行二次封装 import axios from axios//1、利用axios对象的方法create,去创建一个axios实例 const requests …

Redux基础知识,Redux部分源码分析(手写)

复合组件通信的两种方案&#xff1a; 基于props属性实现父子组件通信(或具备相同父亲的兄弟组件)基于context上下文实现祖先和后代组件间的通信(或具备相同祖先的平行组件) 除了以上方案&#xff0c;其实还可以基于公共状态管理&#xff08;Redux&#xff09;实现组件间的通信…

有哪些pdf修改方法?这几种方法学会就够了

有哪些pdf修改方法&#xff1f;PDF是一种非常常见的电子文档格式&#xff0c;它有很多优点&#xff0c;例如可读性强、易于保护、易于打印等等。但是&#xff0c;有时候我们需要对PDF进行修改&#xff0c;例如添加、删除或修改文本、更改图片、合并或分割文件等等。那么今天就给…

对强缓存和协商缓存的理解

浏览器缓存的定义&#xff1a; 浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储&#xff0c;当访问者再次访问同一页面时&#xff0c;浏览器就可以直接从本地磁盘加载文档。 浏览器缓存分为强缓存和协商缓存。 浏览器是如何使用缓存的&#xff1a; 浏览器缓存…