Best approach for child components

[alperunal]

Hi There,

Currently using vee-validate v3. Have two approaches in my mind to accessing ValidationProviders in child components.

Structure is; parent component has ValidationObserver and all ValidationProviders are in child components.

<ValidationObserver v-slot="{ pristine, invalid }" @submit.prevent="handleSubmit" tag="form" ref="observer"> <div> <ComponentOne :assignRef="assignRef('componentOneRef')" /> </div> <div v-if="$refs.componentOneRef.flags.validated"> <ComponentTwo /> </div> </ValidationObserver>

In this example, to access ValidationProvider inside of the ComponentOne, I send assignRef function as a prop then inside of the child component I assign ValidationProvider ref to send it to the parent.

I also think that I can store validated flags for each provider in the Vuex store.

What is your idea about this situation?

[logaretm]

I always avoid mixing Vuex with form state for most cases. So the preferred approach would be the first one where your input components use the ValidationProvider as a wrapper inside them, while having the form parents wrapped with a ValidationObserver.

The Vuex approach would be tricky to implement since you only have access to the validation state in the template and not in your script.