当我离开输入时，我试图触发一个函数，但是我如何配置输入是通过使用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标签中。
我有三个问题:
- 我如何在
vue-bootstrap-typeahead组件的输入上添加@blur ? - 如何在
vue-bootstrap-typeahead组件的输入中添加id? - 如何在
vue-bootstrap-typeahead组件内的input标签中添加eventListener ?
如果你知道1的答案，你就不需要回答2，以此类推。但如果能找到这三个问题的答案，那就太酷了。
vue-typeahead-component可用事件仅包括hit和input事件，因此您不能将@blur应用于组件本身。
在vue-bootstrap-typeahead的内部<input>上添加一个事件监听器:
- 在
<vue-bootstrap-typeahead>组件上使用模板ref - 从ref中，通过
vm.$el获得它的根DOM元素。 - 使用
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>