I'm trying to trigger a function when I leave an input, but how I configured the input is by using vue-bootstrap-typehead. By inspecting the input element in the DOM it would be structured like this:
<div id="myElement">
<div class="input-group input-group-sm">
<input type="search" autocomplete="off" class="form-control">
and this is my code:
<vue-bootstrap-typeahead
id="myElement"
v-model="plateNumberFilter"
:data="plateNumberOptions"
size="sm"
required
@blur="myFunctionIsnnotTriggered"
@hit="returnPlateNumberId()"
/>
I've tried adding the id="myElement" on the typeahead itself but it puts the id in the div instead, which kinda makes sense, but I would've wanted it to be in the input tag instead.
So I have 3 questions:
vue-bootstrap-typeahead component?id in the input of a vue-bootstrap-typeahead component?input tag inside the vue-bootstrap-typeahead component?You don't need to answer 2 if you have an answer for 1 and so on. But it would be cool to have an answer to all 3 of them.
The vue-typeahead-component available events only include hit and input events, so you can't apply @blur to the component itself.
To add an event listener on the inner <input> of vue-bootstrap-typeahead:
<vue-bootstrap-typeahead> component.vm.$el.Element.querySelector() to get the inner <input>.EventTarget.addEventListener('blur', handler) to listen to the blur event on the <input>.<template>
<vue-bootstrap-typeahead ref="typeahead" 1️⃣ />
</template>
<script>
export default {
async mounted() {
await this.$nextTick()
this.$refs.typeahead.$el 2️⃣
.querySelector('input') 3️⃣
.addEventListener('blur', (e) => console.log('blur', e)) 4️⃣
},
}
</script>