Vue 3: How to Handle Dynamic Form Validation with Vuelidate in Nested Components?
I'm trying to debug I've been struggling with this for a few days now and could really use some help... Quick question that's been bugging me - I'm working on a project and hit a roadblock. I'm building a dynamic form in Vue 3 using Vuelidate for validation, but I'm running into issues with validating nested components. My parent component has a form with a nested child component that represents an address form. The problem arises when I try to validate the fields in the child component from the parent. I can see that the validation state for the child component is not being reflected correctly in the parent. I've tried using the `$touch` method from Vuelidate within the child component and emitting events to the parent, but I still get `undefined` when trying to access the child validation state. Here’s how my setup looks: ### Parent Component ```vue <template> <form @submit.prevent="submitForm"> <child-address ref="addressForm" /> <button type="submit">Submit</button> </form> </template> <script> import { required } from '@vuelidate/validators'; import ChildAddress from './ChildAddress.vue'; import useVuelidate from '@vuelidate/core'; export default { components: { ChildAddress }, setup() { const state = reactive({}); const rules = { address: { street: { required }, city: { required } } }; const v$ = useVuelidate(rules, state); const submitForm = () => { v$.$touch(); if (v$.$invalid) { console.log('Form is invalid!'); return; } // Submit logic here }; return { v$, submitForm }; } }; </script> ``` ### Child Component ```vue <template> <div> <input type="text" v-model="address.street" @blur="$touch" placeholder="Street" /> <input type="text" v-model="address.city" @blur="$touch" placeholder="City" /> </div> </template> <script> import { required } from '@vuelidate/validators'; import useVuelidate from '@vuelidate/core'; export default { setup() { const address = reactive({ street: '', city: '' }); const rules = { street: { required }, city: { required } }; const v$ = useVuelidate(rules, address); return { address, v$ }; } }; </script> ``` When I try to access the child validation state in the parent component using `this.$refs.addressForm.v$`, it shows up as `undefined`. How can I achieve proper validation for the nested child components while ensuring that all validation states are correctly tracked in the parent? Any help or insights would be greatly appreciated! Has anyone else encountered this? Any help would be greatly appreciated! I'm working on a service that needs to handle this. Thanks, I really appreciate it! I'm working in a CentOS environment. How would you solve this? I'd love to hear your thoughts on this.