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 中

参考链接

相关推荐
大黄说说15 分钟前
HTML5语义化标签:从div到article与section的进化之路
前端·html·html5
帅小伙―苏16 分钟前
力扣42接雨水
前端·算法·leetcode
糯米团子74922 分钟前
react速通-2
前端·react.js·前端框架
糯米团子74924 分钟前
react速通-3
javascript·react.js·前端框架
心连欣30 分钟前
从静态页面到动态交互:DOM操作的核心API解析
前端·javascript·api
橙某人33 分钟前
SSR页面上的按钮点不了?Nuxt 懒加载水合揭秘💧
前端·vue.js·nuxt.js
零瓶水Herwt38 分钟前
Javascript常用设计模式
javascript
PursuitofHappiness41 分钟前
2 tree-cli 的使用方法
前端
风骏时光牛马43 分钟前
C Shell脚本编程与系统管理技术实践指南
javascript
烛衔溟43 分钟前
TypeScript this 参数类型与全局 this
javascript·ubuntu·typescript