Nuxt/Vue - 你如何在 vue-bootstrap-typeahead 中放置一个@blur？

Question

我试图在离开输入时触发一个功能，但我如何配置输入是使用 vue-bootstrap-typehead。通过检查 DOM 中的输入元素，它的结构如下：

<div id="myElement">
  <div class="input-group input-group-sm">
    <input type="search" autocomplete="off" class="form-control">

这是我的代码：

<vue-bootstrap-typeahead
   id="myElement"
   v-model="plateNumberFilter"
   :data="plateNumberOptions"
   size="sm"
   required
   @blur="myFunctionIsnnotTriggered"
   @hit="returnPlateNumberId()"
/>

我试过在预输入本身上添加 id="myElement" 但它把 id 放在 div 中，这有点道理，但我会想要它改为在 input 标签中。

所以我有 3 个问题：

如何在 vue-bootstrap-typeahead 组件的输入上添加 @blur？
如何在 vue-bootstrap-typeahead 组件的输入中添加 id？
如何在 vue-bootstrap-typeahead 组件内的 input 标签中添加一个 eventListener？

如果您对 1 有答案，则无需回答 2，依此类推。但是如果能对所有 3 个问题都给出答案就太好了。

Answer 1

vue-typeahead-component available events 仅包含 hit 和 input 事件，因此您不能将 @blur 应用于组件本身。

要在 vue-bootstrap-typeahead 的内部 <input> 添加事件侦听器：

在 <vue-bootstrap-typeahead> 组件上使用 template ref。
从 ref 中，通过 vm.$el.
使用Element.querySelector()得到内层<input>.
使用 EventTarget.addEventListener('blur', handler) 监听 <input> 上的 blur 事件。

<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

Nuxt/Vue - 你如何在 vue-bootstrap-typeahead 中放置一个@blur？

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

javascript

vue.js

nuxt.js