Как использовать vee-validate в отношениях родитель-ребенок

Question

У меня есть пара компонентов, которые необходимо проверить. Проблема заключается в том, что входные данные находятся в дочернем компоненте, в то время как кнопка отправки находится в родительском компоненте, например:

ParentComponent.js

<ValidationObserver v-slot="{ passes }"> 
     <form @submit.prevent="passes(someSubmitFunction)">
         <ChildComponent />
     </form>
</ValidationObserver>

ChildComponent.js

     <ValidationProvider rules="required" v-slot="{ errors }" name="vendorName">
         <el-input />
      </ValidationProvider>

Что я здесь не так делаю?

Answer 1

К счастью, существует шаблон для разделения области действия валидатора между родительскими и дочерними компонентами! Вы можете inject валидатор из родительского в дочерний, чтобы они использовали один и тот же экземпляр. Это означает, что вы можете проверить дочерние входные данные от родителя с помощью this.$validator.validate()

Документы: http://vee -validate.logaretm.com / v2 / concepts / injection.html

Answer 2

вы можете использовать ссылку на дочерний компонент, а затем попытаться выполнить проверку этой ссылки при вызове someSubmitFunction

Примерно так:

  const isValid = await this.$refs.childref.validate()