VeeValidate с редактируемой строкой таблицы BootstrapVue

У меня возникла проблема с созданием редактируемой строки в b-таблице начальной загрузки и 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>

person kenazs    schedule 04.02.2020    source источник
comment
Ваша цель - проверять по каждой строке или по таблице?   -  person Hiws    schedule 04.02.2020
comment
@Hiws цель - проверить только строку   -  person kenazs    schedule 05.02.2020


Ответы (1)


Поскольку <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());
      }
   }
}
person Troy Kessler    schedule 04.02.2020
comment
wrap one ValidationObserver around the table and remove the nested ones like this Вы забыли удалить вложенные в первом примере кода? - person Hiws; 04.02.2020
comment
@TroyKessler, спасибо за ответ! Но как работать с более чем одной редактируемой строкой в ​​таблице? - person kenazs; 05.02.2020
comment
@kenazs, так что вам действительно нужен метод для каждой строки, который проверяет только входные данные в указанной строке? - person Troy Kessler; 05.02.2020