时间戳

首页 > 解决方案 > 带有 BootstrapVue 可编辑表格行的 VeeValidate

vue.js - 带有 BootstrapVue 可编辑表格行的 VeeValidate

问题描述

我遇到了在引导 b-table 和 veevalidate 上创建可编辑行的问题。是否可以创建多个 ValidationObservers 并通过调用一种方法来验证它们？

<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>

标签： vue.jsbootstrap-vuevee-validate

解决方案

由于<ValidationObserver>显示了所有<ValidationProvider>插槽中的聚合结果，因此您可以将一个 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 引用（仅当您在此组件中没有其他引用时才有效）

<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());
      }
   }
}

推荐阅读