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

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

bash 复制代码
修改前代码使用 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错乱。

bash 复制代码
修改后各渲染各的
<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 中

参考链接

相关推荐
梦de天空一米168843 分钟前
【一个重复id让游戏卡在62%,聊聊配置表检查】
前端
ryn483981 小时前
01 一个功能模块,怎么分层才不乱
前端·ai编程·claude
Amos_Web1 小时前
通过 Rspack 源码学 Rust(五):读懂 Result 与问号运算符的错误返回
前端
杨航 AI1 小时前
JEV的用法
java·前端·数据库
Amos_Web1 小时前
Rspack 源码解析(三十五):rspack_error 如何用 miette 渲染带源码定位的错误链
前端
去伪存真1 小时前
高敏资产场景下的大模型协同设计架构
前端·agent
修炼的dance1 小时前
OCR预处理测了108组,纠斜去噪有用,坑在顺序和力度
前端
疯华整猫1 小时前
Android 16 后台常驻适配:用 Trae 搭一套“前台服务 + 加急 Job”的可存活架构
前端
独隅1 小时前
WebStorm Windows 版 React / Next.js 实战替换指南
javascript·windows·webstorm
冷眸_1 小时前
同名食材不能直接相减:一个 JavaScript 用量模型的边界
javascript