Я пытаюсь создать динамические формы с проверками, используя veeValidate в vuejs, способ, которым я пытаюсь это сделать, - это создание массива объектов внутри данных компонента, например:
data(){
return{
inputs: [
{
id: 1,
label: "first name",
type: "text",
placeholder: "",
model: "",
rules: "required"
},
{
id: 2,
label: "last name",
type: "text",
placeholder: "",
model: "",
rules: "required"
} ]
}
}
И для html:
<ValidationObserver v-slot="{ handleSubmit }">
<b-form @submit.prevent="handleSubmit(onSubmit)" class="p-5">
<div v-for="inp in inputs" v-bind:item="inp" :key="inp.id">
<ValidationProvider name="Value" :rules="inp.rules" v-slot="validationContext">
<b-form-group
:id="'input-group-'+inp.id"
:label="inp.label"
:label-for="'input-'+inp.id"
label-cols="4"
label-cols-lg="2"
>
<div v-if="inp.type != 'select'">
<b-form-input
:type="inp.type"
:placeholder="inp.placeholder"
v-model="inp.model"
:id="'input-'+inp.id"
:name="'input-'+inp.id"
:state="getValidationState(validationContext)"
aria-describedby="input-1-live-feedback"
></b-form-input>
<b-form-invalid-feedback
:id="'input-'+inp.id+'-live-feedback'"
>{{ validationContext.errors[0] }}</b-form-invalid-feedback>
</div>
</b-form-group>
</ValidationProvider>
</div>
<button type="submit">Submit</button>
</b-form>
<div>
Look at the output
{{show}}
</div>
</ValidationObserver>
И это отлично работает при попытке динамически генерировать входные данные в html. Но проблема возникает, когда я пытаюсь добавить проверку формы к этой динамической форме. Что я ожидаю / хочу сделать: Предполагая, что в форме есть кнопка отправки, я ожидаю, что произойдет, если входы будут иметь `` требуемую '' проверку, так это то, что если я нажму кнопку, не набирая сначала ничего, все входы должны показать предупреждение, говорящее "этот ввод необходим" или что-то в этом роде.
Проблема: что на самом деле происходит, так это то, что когда вы нажимаете кнопку отправки, не вводя что-либо во входные данные, только последний вход показывает предупреждающее сообщение.
Вот ссылка codeSandbox на пример, о котором я говорю: https://codesandbox.io/s/codesandbox-733yf?fontsize=14&hidenavigation=1&theme=dark&file=/src/Demo.vue