Vue Element 表单对象子对象无法验证问题解决

在进行表单验证过程中，发现表单绑定的对象中的子对象下的属性无法通过验证规则。

<el-form
  :model="order"
  ref="order"
  :rules="orderRules"
  style="margin: 0px;padding: 0px">
    <el-form-item
      label="工单："
      prop="orderDefinition">
        <el-select
          v-model="order.orderInstance.orderDefinition"
          style="width: 100%;"
          placeholder="工单">
          <el-option
            v-for="(item,index) in orderDefinitionList"
            :key="index"
            :label="item.name"
            :value="item.id"></el-option>
         </el-select>
      </el-form-item>
</form>

order: {
  orderInstance: {
    orderDefinition: '',
  },
},

orderRules: {
  orderDefinition: [{required: true, message: '请选择工单！', trigger: 'change'}]
}

解决方法：

prop 的名字和 rules 中的属性名改为 '对象.属性' 的格式：用引号引起来！

<el-form-item label="工单：" prop="orderInstance.orderDefinition">

orderRules: {
  'orderInstance.orderDefinition': [{required: true, message: '请选择工单！', trigger: 'change'}]
}

原文：https://blog.csdn.net/mineblogjw/article/details/85118303