Vue.js 使用BootstrapVue可编辑表行进行验证

我遇到了在引导b表和veevalidate上创建可编辑行的问题。 是否可以创建多个ValidationObserver并通过调用一个方法对其进行验证

<b-table :items="items">
    <template v-slot:cell(foo)="data">
        <ValidationObserver>
            <ValidationProvider v-slot="{ errors }" rules="required">
                <input v-model="data.value" type="text" />
            </ValidationProvider>
        </ValidationObserver>
    </template>
    <template v-slot:cell(bar)="data">
        <ValidationObserver ref="form">
            <ValidationProvider v-slot="{ errors }" rules="required">
                <input v-model="data.value" type="text" />
            </ValidationProvider>
        </ValidationObserver>
    </template>
</b-table>

由于

显示插槽中所有

的聚合结果，因此您只需将一个ValidationObserver环绕在表中，并删除嵌套的，如下所示

<ValidationObserver ref="form">
<b-table :items="items">
<template v-slot:cell(foo)="data">
    <ValidationProvider v-slot="{ errors }" rules="required">
        <input v-model="data.value" type="text" />
    </ValidationProvider>
</template>
<template v-slot:cell(bar)="data">
    <ValidationProvider v-slot="{ errors }" rules="required">
        <input v-model="data.value" type="text" />
    </ValidationProvider>
</template>
</b-table>
</ValidationObserver>

export default {
   methods: {
      validate() {
         this.$refs.form.validate();
      }
   }
}

---

将一台ValidationObserver环绕在表中，并删除嵌套的服务器，如下图所示

您是否忘记删除第一个示例代码中的嵌套服务器？@TroyKessler感谢您的回复！但是如何处理表中的多个可编辑行？@kenazs，因此您实际上需要为每一行提供一个方法，该方法只验证指定行中的输入？您的目标是“每行”还是“每表”进行验证？@Hiws目标是“仅验证行”

<b-table :items="items">
<template v-slot:cell(foo)="data">
    <ValidationObserver ref="form1">
        <ValidationProvider v-slot="{ errors }" rules="required">
            <input v-model="data.value" type="text" />
        </ValidationProvider>
    </ValidationObserver>
</template>
<template v-slot:cell(bar)="data">
    <ValidationObserver ref="form2">
        <ValidationProvider v-slot="{ errors }" rules="required">
            <input v-model="data.value" type="text" />
        </ValidationProvider>
    </ValidationObserver>
</template>

export default {
   methods: {
      validate() {
         Object.keys(this.$refs).forEach(key => this.$refs[key].validate());
      }
   }
}