VueJS 2: vee-validate 3 – validation for child components not working

vee-validate version: 3.4.5

So I have a FormBuilder.vue component which builds my form inputs schema based. I have a custom InputSlugify component and I want to have vee-validate validation for it with the required rule.

The Problem: When I focus the input and leave the focus, I don’t receive the error message “field is required”. But it works when I use the <b-form-input> component directly. (if field.type === ‘text’)

How can I get the validation working for the custom component?

Thanks in advance!

Here is a working codesandbox example

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

Answer

You need to emit the blur event from your custom component, as vee-validate cannot pick up the event in wrapping components unless you explicitly emit it.

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

The default b-form-input already emits this event which is why it works with it directly.