Error: please transfer a valid prop path to form item

error¶

The data in the form is nested, and when the form items are dynamically added, it appears

Error: please transfer a valid prop path to form item!

The elementUI component of vue used, the data bound to the form form is:

form{
name:'huahua',
age:22,
friend:[
{name:'lingling',age:20},
{name:'yueyue',age:23}
]
}

After consulting the data, in this case, you need to use the following methods to verify the friend

Write rules directly in the el-form-item tag. At the same time, pay attention to the wording of prop. Write the traversed array name + subscript + check field

Examples are as follows:

<div v-for="(item, index) in form.friend" :key="index">
             <el-row>
               <el-col :span="12">
                 <el-form-item label="Name"
                               :prop="'friend.'+index+'.name'"
                               :rules="{required: true, message:'Please enter your name', trigger:'blur'}"
                 >
                   <el-input v-model="item.name" placeholder="Please enter your name" maxlength="30" />
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="age"
                               :prop="'friend.'+index+'.age'"
                               :rules="{required: true, message:'Please enter age', trigger:'blur'}"
                 >
                   <el-input v-model="item.age" placeholder="Please enter age" maxlength="30" />
                 </el-form-item>
               </el-col>
             </el-row>
           </div>

props and rules require data binding