Vue 3: Dynamic Form Field Validation scenarios After Adding Fields Dynamically
I'm confused about I'm deploying to production and I'm working on a personal project and I've looked through the documentation and I'm still confused about I'm working with Vue 3 and trying to implement a dynamic form where users can add new fields on the fly..... The form uses VeeValidate for validation. However, after dynamically adding new fields, the validation does not trigger as expected, leading to incorrect form submission without validation errors. I have the following setup: ```javascript <template> <Form @submit="handleSubmit"> <Field v-for="(field, index) in fields" :key="index" name="dynamicFields[index]"> <Input v-model="field.value" /> <ErrorMessage :name="`dynamicFields.${index}`" /> </Field> <button @click="addField">Add Field</button> <button type="submit">Submit</button> </Form> </template> <script> import { ref } from 'vue'; import { Form, Field, ErrorMessage } from 'vee-validate'; import * as yup from 'yup'; export default { setup() { const fields = ref([{ value: '' }]); const schema = yup.object({ dynamicFields: yup.array().of(yup.string().required('Field is required')), }); const addField = () => { fields.value.push({ value: '' }); }; const handleSubmit = (values) => { console.log('Submitted values:', values); }; return { fields, addField, handleSubmit }; }, }; </script> ``` I've tried updating the validation schema whenever a new field is added, but it seems that the validation does not re-evaluate properly. The form submits with empty fields if I add a new field and don't fill it in. The console logs don't show any validation errors either. Here’s what I attempted to fix it: - Registered the new fields manually with VeeValidate after adding them. - Ensured the `v-model` was correctly linked to the dynamic array. I also checked for any console errors, but nothing stands out. Any help on how to properly trigger validation for dynamically added fields would be greatly appreciated! What am I doing wrong? Any ideas what could be causing this? I've been using Javascript for about a year now. Any examples would be super helpful. Thanks for any help you can provide! I've been using Javascript for about a year now. Any help would be greatly appreciated!