0

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

家长

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

孩子（第一步）

<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 警告]：v-on 处理程序中的错误：“TypeError：this.$refs[ref].validate 不是函数”

问题

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

4

1 回答 1

2

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

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

如果它看起来像这样，它将起作用：

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

validate 函数附加到子组件的实际输入，而不是子组件本身。所以第一个$refs[ref]让你进入firstStep.vue组件，第二个$refs[ref]让你进入内部输入firstStep.vue。此外，在您的 codepen 中，您拼写错误ref="firtStep"，firstStep.vue因此没有帮助。

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

于 2019-10-01T15:46:13.133 回答