element-ui 无法对绑定表单的对象中的对象属性进行验证

Question

在element-ui中，如果表单绑定了一个对象，这个对象包含多个对象，例如：

formData: { 
    "applymember": {
        "name": "12", 
        "professionalname": "", 
        "gender": "", "birth": "", 
        "email": "", 
        "phone": "" 
     }
     ...
 }

在el-form中绑定这个对象：

<el-form label-position="left" label-width="80px" :model="formData">
        <personal-info class="card-style"
                       :form-data.sync="formData"/>
        ...
</el-form>

然后在element-form-item中的prop绑定这个对象的属性，例如：

<el-form-item label="电子邮箱"
                  :prop="formData.applymember.email"
                  :rules="[
                    { required: true, message: '请输入邮箱地址' },
                    { type: 'email', message: '请输入正确的邮箱地址' }
                  ]"
                  v-if="formData.applymember && formData.applymember.email !== undefined">
  <el-input v-model="formData.applymember.email"
            prefix-icon="el-icon-message"/>
</el-form-item>

这个rules里的规则是无效的，在这个input中的任何输入都会通过。

我通过查阅资料得知如果rules规则要生效必须要在prop中绑定对应的属性，这个属性是表单绑定的对象的属性，如果prop需要绑定的属性是对象中的对象中的属性，rules似乎就失效了。
所以prop应该如何写，或者别的方法能在不修改表单绑定对象的情况下让rules中的规则生效？

Answer 1

看了一下应该是二级对象照成的 我之前也遇到过 查阅源码得知
`<el-form-item label="月租金："prop="housingInfoBean.rentalPrice">

    <el-input v-model.trim="form.housingInfoBean.rentalPrice"></el-input>&nbsp;元/月

</el-form-item>` 绑定的时候这么绑定 data里面声明就是二级对象方式
rules 绑定的时候是这样"housingInfoBean.rentalPrice":[{ required: true, message: '请输入姓名', trigger: 'blur' },], 这个地方一定是字符串 才有效

Answer 2

为什么要混在一起，建议使用vuex存储状态，父子组件，完成各自的业务逻辑。这样比较清晰。