Element 表单验证项v-model绑定值为对象下嵌套的子对象的属性时无法验证

问题:input绑定的值是对象 obj 下面的子对象 obj.id 时,绑定的rules校验不生效。会出现已经输入值但还会提示id必填的情况。正常情况下绑定校验没有问题

复制代码
<el-form ref="dataForm" :rules="rules" :model="temp">
      <el-form-item label="编号:" prop="id" >
        <el-input v-model="temp.obj.id" />
      </el-form-item>
      <el-form-item label="姓名:" prop="name" >
        <el-input v-model="temp.name" />
      </el-form-item>
</el-form>


temp: {
  obj: { id: '', pass: '' },
  name: '',
},

rules: {
  id: [
    { required: true, message: 'id必填', trigger: 'change' },
  ],
  name: [
    { required: true, message: 'name必填择', trigger: 'change' },
  ],

解决方案1 :在规则定义与绑定时,prop 绑定的规则结构 与rules下的数据结构 'obj.id' 一致

复制代码
<el-form ref="dataForm" :rules="rules" :model="temp">
    <el-form-item label="编号:" prop="obj.id" >
      <el-input v-model="temp.obj.id" :disabled="true" />
    </el-form-item>
</el-form>

rules: {
  'obj.id': [
    { required: true, message: 'id必填', trigger: 'change' },
  ],
}

解决方案2:表单绑定的数据对象修改成对象的子对象

复制代码
<el-form ref="dataForm" :rules="rules" :model="temp.obj">
相关推荐
前端小巷子3 分钟前
CSS单位完全指南
前端·css
SunTecTec44 分钟前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
涵信1 小时前
第十一节:性能优化高频题-响应式数据深度监听问题
javascript·vue.js·性能优化
拉不动的猪2 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程2 小时前
ES练习册
java·前端·elasticsearch
Asthenia04122 小时前
Netty编解码器详解与实战
前端
袁煦丞2 小时前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
Mr.app3 小时前
vue mixin混入与hook
vue.js
一个专注写代码的程序媛3 小时前
vue组件间通信
前端·javascript·vue.js
一笑code3 小时前
美团社招一面
前端·javascript·vue.js