in element-ui, if the form binds an object, the object contains multiple objects, for example:
formData: {
"applymember": {
"name": "12",
"professionalname": "",
"gender": "", "birth": "",
"email": "",
"phone": ""
}
...
} bind this object in el-form :
<el-form label-position="left" label-width="80px" :model="formData">
<personal-info class="card-style"
:form-data.sync="formData"/>
...
</el-form> then bind the properties of this object in prop in element-form-item , for example:
<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> the rule in rules is invalid , and any input in this input will pass.
I learned by consulting the data that if the rules rule is to take effect, you must bind the corresponding property in prop , which is the property of the object bound by the form. If prop needs to bind the property is the property of the object in the object, rules seems to be invalid.
so how should prop be written, or some other way to make the rules in rules take effect without modifying the form binding object ?