【element-ui】el-form-item使用v-if导致的问题 , 增加Key

问题:v-if在操作dom时 在根节点上进行的删减 导致 rules 判断的时候 无法取到 v-if 添加进来的prop值

解决:在 el-form-item 中添加一个属性key,key的值是唯一的(一般key和prop写一样的内容即可,因为rules里面的东西不能重复定义,所以肯定是唯一的。)

html 复制代码
<el-form-item
    prop="accountName"
    key="accountName"
    label="账号"
    :rules="[
      { required: true, message: '请输入账号', trigger: 'blur' },
      { trigger: 'blur', validator: validateAccount },
    ]"
  >
    <el-input
      v-model.trim="CurObject.accountName"
      name="accountName"
      type="text"
    
    />
  </el-form-item>

参考:

给el-form-item,添加key的场景

相关推荐
方安乐1 分钟前
概念:前端工程化实践
前端
kyriewen11 分钟前
Flexbox 完全指南:从此告别浮动,拥抱一维战神
前端·css·html
xChive11 分钟前
ECharts3D图表 | 3D柱状图和3D饼图实现思路
前端·3d·echarts
HookJames11 分钟前
解决Claude Code v2.1.74 官方找不到模型的问题-终结版
前端·chrome
代码煮茶13 分钟前
Vite 工程化实战 | 从 0 配置一个企业级前端项目(按需引入 / 环境变量 / 打包优化)
前端·vue.js
程序员Sunday13 分钟前
5000 字长文,全网最细的OpenClaw(小龙虾)架构拆解,我建议你认真看完
前端·人工智能
踩着两条虫16 分钟前
AI 驱动的 Vue3 应用开发平台 深入探究(九):双向代码转换之处理事件、Props 和指令
前端·vue.js·ai编程
badhope17 分钟前
GitHub热门AI技能Top20实战指南
前端·javascript·人工智能·git·python·github·电脑
踩着两条虫17 分钟前
AI 驱动的 Vue3 应用开发平台 深入探究(八):双向代码转换之 模板编译与AST转换
前端·vue.js·ai编程
毛骗导演20 分钟前
万字解析 OpenClaw 源码架构-跨平台应用之Android 应用
android·前端·架构