Vue.js Vuelidate、v-for和子组件

我有一个构建在子/父结构上的表单，其核心表单细节位于子结构中

只要数据更新且父级在提交时正确处理数据，以下所有操作都有效

但是，我们希望向子组件添加基本验证，这样，如果任何子组件中缺少

必需的
数据，则无法提交父组件

我假设在父对象上需要一个
验证
对象，每个对象的
$each
，但除此之外，我无法确定如何在父对象和子对象之间传递模型

父组件

<b-form>
  <child-item
    v-for="(item, index) in form.children"
    :key="index"
    :item-ref="index"
    :item-year.sync="item.year"
    :item-selection.sync="item.selection"
  />
</b-form>

data: {
  return () {
    form: {
      children: []
    },
    pristine: {
      children: []
    },
  }
}

<b-form-row>
  <b-form-group
    label="Year"
    :label-for="`form-year-${ItemRef}`"
  >
  <b-form-input
    :id="`form-year-${ItemRef}`"
    v-model="year"
  />
</b-form-group>
<b-form-group
  label="Selection"
  :label-for="`form-selection-${ItemRef}`"
>
  <b-form-input
    :id="`form-selection-${ItemRef}`"
    v-model="selection"
  />
</b-form-group>
...
props: {
  ItemRef: Number,
  ItemYear: String,
  ItemSelection: String,
},
computed: {
  selection: {
    get () {
      return this.ItemSelection
    },
    set (newData) {
      this.$emit('update:item-seletion', newData)
    }
  },
  year: {
    get () {
      return this.ItemYear
    },
    set (newData) {
      this.$emit('update:item-year', newData)
    }
  }
}  


数据：{
返回（）{
表格：{
儿童：[]
},
原始的：{
儿童：[]
},
}
}

子组件

<b-form>
  <child-item
    v-for="(item, index) in form.children"
    :key="index"
    :item-ref="index"
    :item-year.sync="item.year"
    :item-selection.sync="item.selection"
  />
</b-form>

data: {
  return () {
    form: {
      children: []
    },
    pristine: {
      children: []
    },
  }
}

<b-form-row>
  <b-form-group
    label="Year"
    :label-for="`form-year-${ItemRef}`"
  >
  <b-form-input
    :id="`form-year-${ItemRef}`"
    v-model="year"
  />
</b-form-group>
<b-form-group
  label="Selection"
  :label-for="`form-selection-${ItemRef}`"
>
  <b-form-input
    :id="`form-selection-${ItemRef}`"
    v-model="selection"
  />
</b-form-group>
...
props: {
  ItemRef: Number,
  ItemYear: String,
  ItemSelection: String,
},
computed: {
  selection: {
    get () {
      return this.ItemSelection
    },
    set (newData) {
      this.$emit('update:item-seletion', newData)
    }
  },
  year: {
    get () {
      return this.ItemYear
    },
    set (newData) {
      this.$emit('update:item-year', newData)
    }
  }
}  


...
道具：{
ItemRef：编号，
项目年份：字符串，
ItemSelection:String，
},
计算：{
选择：{
得到（）{
返回此.ItemSelection
},
集合（新数据）{
此.$emit（'update:item seletion'，newData）
}
},
年份：{
得到（）{
今年归还
},
集合（新数据）{
此.$emit（'update:item year'，newData）
}
}
}