v-if 遇到 el-form 表单验证规则遇到的bug

v-if 遇到 el-form 表单验证规则遇到的bug

需求:当表单项中的单选框选择 是 的时候,上传图片组件为必填项

vue 复制代码
     <el-form-item
          label="展示图"
          prop="displayImage"
          v-if="dengmiQueryForm.isRecommend == 0"
          key="hasRules"
        >
          <ImageUpload
            :limit="1"
            :fileSize="2"
            ref="imageUploadRef2"
            :value="imgList2"
          />
        </el-form-item>

        <el-form-item label="展示图" v-else key="noRules">
          <ImageUpload
            :limit="1"
            :fileSize="2"
            ref="imageUploadRef2"
            :value="imgList2"
          />
        </el-form-item>

特别注意:需要添加 key 不然页面渲染出来,会复用之前的页面结构,虽然显示了必填星号,但是验证规则不起作用

相关推荐
北寻北爱2 分钟前
面试篇-webpack+vite
前端
Kinghiee2 分钟前
使用webpack构建vue3 ssr
前端·webpack·node.js·vue3ssr
wuhen_n6 分钟前
回溯算法入门 - LeetCode经典回溯算法题
前端·javascript·算法
xcs1940513 分钟前
前端 vue this.$nextTick(() => {
前端·javascript·vue.js
广州华水科技15 分钟前
如何在基础设施安全中有效实现GNSS位移监测的应用?
前端
大漠_w3cpluscom18 分钟前
前端怎么提升自己的CSS编写能力?
前端
我是若尘20 分钟前
大数据量渲染优化:分批渲染技术详解
前端
ruanCat20 分钟前
pnpm 踩坑实录:用 public-hoist-pattern 拯救被严格隔离坑掉的依赖
前端·npm·node.js
yuki_uix21 分钟前
渲染优化三件套:React.memo、useMemo、useCallback 的使用边界
前端·react.js
徐同保21 分钟前
如何为 Node.js 多层子进程启动调试(以 OpenClaw 为例)
前端