Vue 3 - Dynamic Form Validation optimization guide with VeeValidate on Nested Fields
I'm trying to configure I'm working on a personal project and I'm experiencing an scenario with dynamic form validation in Vue 3 using VeeValidate v4... I have a form that allows users to add multiple addresses, and I want to validate each address set independently. However, when I add a new address, the validation errors from the previous addresses seem to continue, which leads to incorrect behavior messages appearing for the newly added fields. Here’s a simplified version of my component: ```vue <template> <form @submit.prevent="handleSubmit"> <div v-for="(address, index) in addresses" :key="index"> <Field name="address" v-model="address.street" :rules="'required'" /> <ErrorMessage name="address" /> <Field name="city" v-model="address.city" :rules="'required'" /> <ErrorMessage name="city" /> </div> <button type="button" @click="addAddress">Add Address</button> <button type="submit">Submit</button> </form> </template> <script> import { Field, Form, ErrorMessage } from 'vee-validate'; import { ref } from 'vue'; export default { components: { Field, Form, ErrorMessage }, setup() { const addresses = ref([{ street: '', city: '' }]); const addAddress = () => { addresses.value.push({ street: '', city: '' }); }; const handleSubmit = (values) => { console.log(values); }; return { addresses, addAddress, handleSubmit }; } }; </script> ``` I’ve tried a few different approaches, such as using unique names for each field like `address[${index}].street` and handling validation manually, but it seems to complicate things further. The validation doesn’t trigger correctly when I add new addresses, and I often see the behavior message `"The field address is required"` for the previously filled addresses when I try to submit the form. How can I resolve this scenario to ensure that each set of fields is validated independently without retaining stale behavior messages? What am I doing wrong? For reference, this is a production desktop app. Any suggestions would be helpful.