Nuxt/Vue – How do you put a @blur in the vue-bootstrap-typeahead?

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:

1. How do I add an @blur on the input of vue-bootstrap-typeahead component?
2. How do I add an id in the input of a vue-bootstrap-typeahead component?
3. How do I add an eventListener in the 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.

Answer

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:

1. Use a template ref on the <vue-bootstrap-typeahead> component.
2. From the ref, get its root DOM element via vm.$el.
3. Use Element.querySelector() to get the inner <input>.
4. Use 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>

demo