My goal is to validate each component in my form independently using Vee-validate, even if they have multiple fields.
I came across this topic which discusses validating components at the same time. However, I'm looking for a way to validate each component separately without using EventBus.
In my multi-step form, I want to validate each step before moving on. For example:
-- Step 1
---- <component-one /> == component with fields
---- (next button) <-- validate content 1. If valid, go to step 2
-- Step 2
---- <component-two /> == component with fields
---- (next button) <-- validate content 2. If valid, go to step 3
-- Step 3
---- <component-three/> == component with fields
---- (next button) <-- validate content 3. If valid, go to next step
The issue I'm facing is that I need to use this.validator on the component level for validation, but my continue button is at the parent level. Creating a shared $validator would require all steps to be valid simultaneously for progression, which is not feasible.