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

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

在 Element UI 中，表单验证是非常重要的一个功能。我们可以使用 `v-validate` 指令来对表单进行验证。但是在某些情况下，我们可能需要绑定一个对象下嵌套的子对象的属性到表单项上，这样就导致了 v-model 绑定值为对象下嵌套的子对象的属性时无法验证。

**问题描述**

假设我们有一个表单，其中包含一个 `user` 对象，里面有一个 `address` 子对象。我们想绑定 `address` 的 `province` 属性到一个选择框上，但是 v-model 绑定值为对象下嵌套的子对象的属性时无法验证。

**示例代码**

html<template>
 <div>
 <el-form :model="form" ref="form">
 <el-form-item label="省份" prop="address.province">
 <el-select v-model="form.address.province" placeholder="请选择省份">
 <el-option v-for="(item, index) in provinces" :key="index" :label="item.name" :value="item.id"></el-option>
 </el-select>
 </el-form-item>
 </el-form>
 </div>
</template>

<script>
export default {
 data() {
 return {
 form: {
 address: {
 province: ''
 }
 },
 provinces: [
 { id:1, name: '北京' },
 { id:2, name: '上海' },
 { id:3, name: '广州' }
 ]
 }
 }
}
</script>

**问题原因**

在上面的示例代码中，我们使用 `v-model` 绑定值为对象下嵌套的子对象的属性 `form.address.province`。但是，这个绑定值是无法被 v-validate 检测到的，因为它是一个对象下的属性，而不是一个简单的值。

**解决方案**

为了解决这个问题，我们可以使用 `v-model` 绑定值为一个函数，返回对象下嵌套的子对象的属性的值。例如：

html<template>
 <div>
 <el-form :model="form" ref="form">
 <el-form-item label="省份" prop="getProvince()">
 <el-select v-model="getProvince()" placeholder="请选择省份">
 <el-option v-for="(item, index) in provinces" :key="index" :label="item.name" :value="item.id"></el-option>
 </el-select>
 </el-form-item>
 </el-form>
 </div>
</template>

<script>
export default {
 data() {
 return {
 form: {
 address: {
 province: ''
 }
 },
 provinces: [
 { id:1, name: '北京' },
 { id:2, name: '上海' },
 { id:3, name: '广州' }
 ]
 }
 },
 methods: {
 getProvince() {
 return this.form.address.province }
 }
}
</script>

在上面的示例代码中，我们使用 `v-model` 绑定值为一个函数 `getProvince()`，这个函数返回对象下嵌套的子对象的属性 `form.address.province` 的值。这样就可以让 v-validate 检测到这个属性，并进行验证。

**结论**

综上所述，使用 `v-model` 绑定值为对象下嵌套的子对象的属性时无法验证的问题，可以通过使用一个函数返回对象下嵌套的子对象的属性的值来解决。