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 不然页面渲染出来,会复用之前的页面结构,虽然显示了必填星号,但是验证规则不起作用

相关推荐
阳火锅16 小时前
💡 告别类名地狱!Tailwind CSS 语义化转换神器来了
前端·css·vue.js
ricardo197316 小时前
Core Web Vitals 全解:LCP / INP / CLS 逐个击破
前端
VillenK16 小时前
版本依赖问题:vite-plugin-dts@3.1.0 与 jiti 的兼容性
前端·typescript·vite
Apifox16 小时前
如何在 Apifox 中快速构建和调试 AI Agent
前端·agent·ai编程
一晌贪欢i16 小时前
WebContainer 重点介绍
前端·webcontainer
山河木马17 小时前
Emscripten 从 C/C++ 调用 JavaScript
前端·javascript·c++
鹏程十八少17 小时前
12. Android 协程通关秘籍:31 道资深工程师面试题精讲
前端·后端·面试
Dlrb121117 小时前
C语言-字符串指针与函数指针
java·c语言·前端
PBitW17 小时前
组件封装注意事项
前端·vue.js
weiggle17 小时前
Android 输入事件分发流程:从物理触控到 Activity 的完整旅程
前端