vee-validate - Validating child component from parent

0
votes

I'm using vee-validate 3.x I'd like to validate a form contained in a child component from the parent component.

Parent

<form-wizard>
<tab-content :before-change="() => validateStep('firstStep')">
  <first-step ref="firstStep"></first-step>
</tab-content>
<tab-content>Step 2</tab-content>

Child (firstStep)

<div>
    <ValidationProvider rules="required" ref="firstStep" v-slot="{ errors }">
      <input v-model="value" type="text" />
      <span>{{ errors[0] }}</span>
    </ValidationProvider>
  </div>

Here is a minimum code reproduction of the issue

https://codesandbox.io/s/vue-template-m17sn

I've got this error when validateStep is executed

[Vue warn]: Error in v-on handler: "TypeError: this.$refs[ref].validate is not a function"

Question

I have the feeling the issue is related with ref, I've been looking around but did not manage to find a solution.

1
vue.jsvee-validate

1 Answers

2
votes

Your parent validation function looks like this:

validateStep(ref) {
  return this.$refs[ref].validate();
}

It would work if it looked like this:

validateStep(ref) {
  return this.$refs[ref].$refs[ref].validate();
}

The validate function is attached to the actual input of the child, not to the child component itself. So the first $refs[ref] gets you to firstStep.vue, the component, the second $refs[ref] gets you to the internal input in firstStep.vue. Also, in your codepen, you misspelled ref="firtStep" in firstStep.vue, so that didn't help.

I have a feeling you would be better served to have the firstStep form validation track it's own state and emit an event when the form is in a valid state. That way if there's 10 fields in the form, the parent doesn't need to know anything about them, just that they were valid or not.