当前位置: 首页 > article >正文

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">


http://www.kler.cn/a/37904.html

相关文章:

  • FLutter 开发中 fijkplayer设置屏幕常亮
  • Android 内存泄漏的常见原因及其对应的解决方案
  • 提示“无法向会话状态服务器发出会话状态请求。请确保 ASP.NET State Service (ASP.NET 状态服务)已启动”,如何解决?
  • 算法学习day24
  • 实验四(双向重发布)7 14
  • Java线程状态
  • 基于flask框架的用户注册页面实例
  • STM32 Proteus仿真双路0-20V直流电压表TM1637数码管-0061
  • 【python opencv】如何获取一个图片区域的亮度
  • 安装fastDFS
  • 面试题更新之-hook中setState原理
  • K8S的部署项目流程
  • 〖码银送书第三期〗《Python机器学习:基于PyTorch和Scikit-Learn》
  • 基于MATLAB环境下的子空间聚类算法:理解和实践
  • android 下载源码 一路踩坑
  • k8s创建es和kibana
  • 【NOSQL】redis哨兵模式、集群搭建
  • 天池大赛中药说明书实体识别挑战冠军方案开源(二)部署运行实战 附详细操作说明
  • 从小白到大神之路之学习运维第58天--------Firewalld防火墙
  • RabbitMQ ---- 延迟队列