Vue 3: Dynamic Form Field Validation Not Triggering on Add/Remove Actions
I've been struggling with this for a few days now and could really use some help... I've been banging my head against this for hours. I've been banging my head against this for hours. I'm building a dynamic form in Vue 3 where users can add or remove fields for entering their skills. I'm using VeeValidate for validation, but I'm running into an issue where the validation doesn't trigger properly when fields are dynamically added or removed. Specifically, when I remove a skill field, the validation message for that field persists, and when I add a new field, the validation doesn't seem to apply until I focus on the field and blur it again. Here’s a simplified version of my component: ```vue <template> <form @submit.prevent="submitForm"> <div v-for="(skill, index) in skills" :key="index"> <input v-model="skill.name" v-validate="{ required: true }" name="skill" /> <span v-if="errors.has(`skill.${index}`)">{{ errors.first(`skill.${index}`) }}</span> <button type="button" @click="removeSkill(index)">Remove</button> </div> <button type="button" @click="addSkill">Add Skill</button> <button type="submit">Submit</button> </form> </template> <script> import { required } from '@vee-validate/rules'; import { defineRule, useForm } from 'vee-validate'; defineRule('required', required); export default { data() { return { skills: [{ name: '' }], }; }, methods: { addSkill() { this.skills.push({ name: '' }); this.$nextTick(() => { this.$refs.skill[`${this.skills.length - 1}`].$validate(); }); }, removeSkill(index) { this.skills.splice(index, 1); }, submitForm() { // submission logic here }, }, }; </script> ``` I’ve tried using `this.$nextTick()` after adding a skill, but it does not seem to trigger the validation correctly. For removing skills, I ensured to call `this.$refs.skill[index].$invalidate()` before removing the field, but the error message still sticks around. I also checked that the validation rule is applied based on the index of the skill, but it seems that the validation state isn't being updated correctly in these scenarios. Any suggestions on how to resolve this issue? Is there something I might be missing in the lifecycle of the component regarding validation? Thanks! Has anyone else encountered this? What am I doing wrong? I'm working in a Linux environment. What's the correct way to implement this? Any advice would be much appreciated.