VueJS 2：vee-validate 3 - 子组件验证不起作用

Posted 2023-02-23

【中文标题】VueJS 2：vee-validate 3 - 子组件验证不起作用

【英文标题】：VueJS 2: vee-validate 3 - validation for child components not working

【发布时间】：2021-05-06 02:40:19

【问题描述】：

vee 验证版本：3.4.5

所以我有一个 FormBuilder.vue 组件，它基于我的表单输入模式构建。我有一个自定义 InputSlugify 组件，我想使用所需的规则对其进行 vee-validate 验证。

问题：当我聚焦输入并离开焦点时，我没有收到错误消息“字段是必需的”。但是当我直接使用 <b-form-input> 组件时它可以工作。 （如果 field.type === 'text'）

如何让自定义组件的验证工作？

提前致谢！

这是一个有效的代码框示例

https://codesandbox.io/s/mystifying-frost-3yidg?file=/src/components/InputSlugify.vue

【参考方案1】：

您需要从您的自定义组件中 emit blur 事件，因为 vee-validate 无法在包装组件中获取该事件，除非您明确发出它。

<b-form-input @blur="$emit('blur')" ... />

默认的b-form-input 已经发出这个事件，这就是它直接使用它的原因。