My goal is to create dynamic forms with validations using veeValidate in Vue.js. I am attempting to achieve this by storing an array of objects within the component's data. For instance:
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"
} ]
}
}
For the HTML implementation:
<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>
While this method works well for dynamically generating inputs in the HTML, I encounter an issue when trying to add form validation to these dynamic forms. Desired Outcome: If the form has a submit button, with inputs that have 'required' validation, the expectation is that upon clicking the button without inputting anything, all inputs should display a warning stating "this input is required" or a similar message.
The Issue: When the submit button is pressed without entering anything in the inputs, only the last input displays the warning message.
For reference, here is the link to the codesandbox example showcasing this issue: https://codesandbox.io/s/codesandbox-733yf?fontsize=14&hidenavigation=1&theme=dark&file=/src/Demo.vue