Vue bootstrap on blur event

Question

I am not able to use vue on blur event, In my component I have a @change directive

<b-input :value="value" @change="validateEmail($event)" @input="$emit('input', $event)" ref="input" :state="state"/>

This is because @blur doesn't seem to work. Bootstrap vue on:blur handler is not been called

This works partially when I am changing the input and hit tab, then works, but if I focus on the input and click tab without changing the input, it doesn't work. I want to show a message that email is required in this case but I cannot.

Answer 1

You may use @blur.native with Bootstrap Vue inputs.

<b-input
        :value="value"
        @change="validateEmail($event)"
        @input="$emit('input', $event)"
        ref="input"
        :state="state"

        @blur.native="handleBlur"

/>

https://github.com/bootstrap-vue/bootstrap-vue/issues/1645#issuecomment-369477878

Answer 2

you can use @blur.native="function"