Vue 3: How to properly handle form input validation with Vuelidate in a dynamic form scenario?
I'm a bit lost with I'm not sure how to approach I'm having trouble with I'm working on a personal project and I'm currently working on a Vue 3 application where I need to implement form validation for a dynamically generated form using Vuelidate. The form fields are created based on user selections and can change frequently. I've set up Vuelidate for validation, but I'm working with issues where the validations do not trigger correctly when the fields change or when I add new fields dynamically. For instance, when I add a new field, the validation doesn't seem to recognize it, and I get an behavior saying `want to read properties of undefined (reading 'required')`. Here's a snippet of my component code to illustrate what I've done so far: ```javascript <template> <form @submit.prevent="handleSubmit"> <div v-for="(field, index) in formFields" :key="index"> <input v-model="field.value" @blur="$v.formFields[index].$touch()" /> <span v-if="!$v.formFields[index].$pending && !$v.formFields[index].$model">Field is required</span> </div> <button type="button" @click="addField">Add Field</button> <button type="submit">Submit</button> </form> </template> <script> import { required } from 'vuelidate/lib/validators'; import useVuelidate from '@vuelidate/core'; export default { data() { return { formFields: [ { value: '' }, ], }; }, validations() { return { formFields: { $each: { value: { required } }, }, }; }, methods: { addField() { this.formFields.push({ value: '' }); this.$v.formFields.$reset(); // Reset validations }, handleSubmit() { this.$v.$touch(); // Trigger validation if (this.$v.$invalid) return; // Submit logic here }, }, mounted() { this.$v = useVuelidate(); }, }; </script> ``` I've tried resetting the validations after adding a new field, but it doesn't seem to work as expected. The behavior continues, and I need to find a way to ensure that newly added fields are properly validated. Any suggestions on how to fix this scenario or better manage dynamic validations with Vuelidate in Vue 3? Any help would be greatly appreciated! I'm working with Javascript in a Docker container on Windows 11. How would you solve this? This is happening in both development and production on Ubuntu 22.04. Thanks for any help you can provide! The project is a CLI tool built with Javascript. I'd love to hear your thoughts on this. I'm developing on macOS with Javascript.