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

by

3👍

✅

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

👤tony19

Leave a comment