vee-validate（Vue 2）不验证子组件

Question

我在使用 vee-validation 包的 Vue2.js 上运行的应用程序遇到问题。

这里是应用程序的链接：https://codepen.io/EnjoyMachine/pen/ogvbZgO

// find the code in the codepen link

如您所见，此应用程序有 2 个文本字段，并且两个字段都需要输入值。 （由 vee-validate 进行验证） 第一个文本字段位于应用程序中，第二个文本字段位于子组件中。

如果您单击“保存”按钮而不填写任何内容，则只有第一个字段出现验证错误。

我的组件内部的验证出了什么问题？ 有什么我忘记了吗？

请不要告诉我使用除 vee-validate 之外的其他库（我无法更改）

Answer 1

问题在于

$validator.validateAll()

，它仅验证注册到验证器的输入。由于子级使用自己的验证器，因此在父级上调用

$validator.validateAll()

时，不会验证其输入。

有多种方法可以修复它（请参阅GitHub问题），但最简单的方法是将父验证器注入到子验证器中：

Vue.component('section-restriction', {
  ...,
  inject: ['$validator'],
});

检查更新的Codepen。