I have a component called styled-input
and it's an input with styles, icons, validation, etc.
I am trying to use addEventListener
inside a custom directive to listen to events and make things happen.
<styled-input
v-model=""
v-on:input=""
v-on:blur=""
></styled-input>
Internally:
value
is a prop (allowing for v-model
binding outside)
<template>
<div>
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
v-on:blur="$emit('blur', $event.target.value)"
/>
</div>
</template>
I'm trying to addEventListener
s to the tag through custom directives for custom validation.
<styled-input
v-model=""
v-custom-validator:credit-card
></styled-input>
Inside the directive I am using addEventListener
to listen to events from the input field.
Vue.directive('custom-validator', {
bind: function(el, binding) {
el.addEventListener('blur', (event) => {
// Does not fire
});
el.addEventListener('input', (event) => {
/// Fires
});
},
});
Why doesn't the blur event fire, while the input event fires?
How can I get the blur event to fire?