element-ui 無法對繫結表單的物件中的物件屬性進行驗證
阿新 • • 發佈:2018-12-23
<el-form-item label="型別" :label-width="formLabelWidth" prop="typeId"> <template> <el-select v-model="form.typeId" clearable placeholder="請選擇"> <el-option v-for="type2 in types" :key="type2.id" :label="type2.name" :value="type2.id"> </el-option> </el-select> </template> </el-form-item> <el-form-item label="設計師" :label-width="formLabelWidth" prop="designer.id"> <template> <el-select v-model="form.designer.id" clearable placeholder="請選擇"> <el-option v-for="designer in designers" :key="designer.id" :label="designer.name" :value="designer.id"> </el-option> </el-select> </template> </el-form-item>
如果是直接繫結屬性,是可以的,但是繫結物件中的屬性就需要特別處理,需要在rules中新增雙引號 " "
data:function() { return { form: {id:"",name:"",code:"",config:"",designer:{id:""}}, types:[], diyResourceImgs:[], designers:[], formLabelWidth:"100px", uploading:false, uploadings:false, //rules 加校驗 rules: { name: [ { required: true, message: '請輸入素材名稱', trigger: 'blur' }, ], code: [ { required: true, message: '請輸入素材編號', trigger: 'blur' }, ], price: [ { required: true, message: '請輸入素材價格', trigger: 'blur' }, ], typeId: [ { required: true, message: '請選擇型別', trigger: 'blur' }, ], "designer.id":[ {required:true,message: '請選擇型別',trigger:'blur'}, ] } } },