Estoy tratando de activar una función cuando dejo una entrada, pero la forma en que configuré la entrada es usando vue-bootstrap-typehead . Al inspeccionar el elemento de entrada en el DOM, se estructuraría así:
<div id="myElement"> <div class="input-group input-group-sm"> <input type="search" autocomplete="off" class="form-control">y este es mi codigo:
<vue-bootstrap-typeahead id="myElement" v-model="plateNumberFilter" :data="plateNumberOptions" size="sm" required @blur="myFunctionIsnnotTriggered" @hit="returnPlateNumberId()" /> Intenté agregar el id="myElement" en el propio typeahead, pero en su lugar coloca el id en el div , lo que tiene sentido, pero hubiera querido que estuviera en la etiqueta de input .
Entonces tengo 3 preguntas:
vue-bootstrap-typeahead ?id en la entrada de un componente vue-bootstrap-typeahead ?input dentro del componente vue-bootstrap-typeahead ?No necesita responder 2 si tiene una respuesta para 1 y así sucesivamente. Pero sería genial tener una respuesta para las 3.
Los eventos disponibles vue-typeahead-component hit incluyen eventos de entrada y input , por lo que no puede aplicar @blur al componente en sí.
Para agregar un detector de eventos en el <input> interno de vue-bootstrap-typeahead :
<vue-bootstrap-typeahead> .vm.$el .Element.querySelector() para obtener el <input> interno.EventTarget.addEventListener('blur', handler) para escuchar el evento de blur en <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>