Vee-валидация независимо проверяет компоненты от родителя без EventBus

Question

Я хотел бы иметь возможность проверять все компоненты (с несколькими полями) в моей форме независимо друг от друга, используя Vee-validate.

Я прочитал эту тему.Однако в решениях все компоненты должны быть проверены одновременно.Я пытался использовать EventBus (безуспешно), и я бы предпочел держаться подальше от него.

У меня есть многошаговая форма, которая должна подтвердить текущий шаг, прежде чем нажимать «продолжить».Пример:

-- 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 2
-- Step 3
---- <component-three/> == component with fields
---- (next button) <-- validate content 3. If valid, go to step 3

Моя проблема в том, что мне нужно вызвать this.validator на уровне компонента, чтобы иметь возможность проверить компонент.Кнопка продолжения, однако, живет на родительском уровне.Я не могу создать один общий $validator, потому что тогда все шаги должны быть действительными, чтобы продолжить (что невозможно) /

Answer 1

Vee-validate имеет концепцию "областей действия", поэтому я думаю, что хитрость заключается в том, чтобы добавить data-vv-scope="step1" к каждому элементу формы в component-one.Затем, когда вы перейдете к валидации в шаге 1 «следующая» кнопка, вы будете делать this.$validators.validateAll('step1').

Если у каждого компонента есть своя собственная форма, вы можете поместить атрибут data-vv-scope на уровне формы ион будет применяться ко всем элементам внутри него.

Подробнее см. в этом примере .