VeeValidate with BootstrapVue editable table row

Question

I'm stucked with a problem on creating editable row on bootstrap b-table and veevalidate. Is it possible to create multiple ValidationObservers and validate them by calling one method?

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

Is your goal to validate on a "per row" basis or a "per table" basis? — Hiws, Feb 04 '20 at 10:00

Troy Kessler · Answer 1 · 2020-02-04T10:02:49.080

Since <ValidationObserver> shows an aggregated result of all <ValidationProvider> in the slots you could just wrap one ValidationObserver around the table and remove the nested ones like this

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

Or you could just loop through every ValidationObserver reference like this (only works if you haven't other refs in this component)

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

`wrap one ValidationObserver around the table and remove the nested ones like this` Did you forget to remove the nested ones in the first example code? — Hiws, Feb 04 '20 at 10:00
@TroyKessler thank you for your reply! But how to deal with more than one editable row in the table? — kenazs, Feb 05 '20 at 01:10
@kenazs so you actually need a method for every row which only validates the inputs in the specified row? — Troy Kessler, Feb 05 '20 at 14:51

VeeValidate with BootstrapVue editable table row

1 Answers1