Vue form表单对多层数据结构进行表单验证

页面上必须写prop，prop的名称需要和v-model中的数据结构最后一层相同：

页面的代码:

<Form :model="form.buildingIntroductionVO" :rules="ruleValidate">
   <FormItem label="热点内容" prop="texts[0].name2">
      <Input  v-model="form.buildingIntroductionVO.texts[0].name2" placeholder="请输入内容" :maxlength="10" clearable/>
   </FormItem>
</Form>

 js的代码：

//data的的数据,表单多层数据数据结构
form:{
    buildingIntroductionVO: {
          id:'',
          texts:[
            {
              place:'bottom',
              name1:'',//文案1
              name2:'',//文案2
            }
          ],
        },
}

//校验的方法
ruleValidate:{
    'texts[0].name2': [
          {
            required: true,
            message: "热点内容不能为空",
            trigger: "blur",
          },
        ],
}