vee-validate

Question

我正在使用 vee-validate 3.x 我想从 parent 组件验证 child 组件中包含的表单。

Parent

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

Child（第一步）

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

这里是问题的最小代码重现

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

执行 validateStep 时出现此错误

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

问题

我感觉这个问题与 ref 有关，我一直在四处寻找，但没有设法找到解决方案。

Answer 1

您的 parent 验证函数如下所示：

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

如果它看起来像这样就可以了：

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

验证函数附加到 child 的实际输入，而不是 child 组件本身。因此，第一个 $refs[ref] 将您带到 firstStep.vue 组件，第二个 $refs[ref] 将您带到 firstStep.vue 中的内部输入。此外，在您的代码笔中，您在 firstStep.vue 中拼错了 ref="firtStep"，所以这没有帮助。

我觉得让 firstStep 表单验证跟踪它自己的状态并在表单处于有效状态时发出事件会更好。这样，如果表单中有 10 个字段，parent 不需要了解它们的任何信息，只需要知道它们是否有效。

vee-validate - 验证来自 parent 的 child 组件

vee-validate - Validating child component from parent

vue.js

Parent

Child（第一步）

问题