element-ui 無法對綁定表單的對象中的對象屬性進行驗證

 

		<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'},
	        ]
		}
      }
    },