Importo un componente y quiero adjuntar un detector de eventos al elemento de botón que tiene la clase qkb-bubble-btn .
Entiendo el hecho de que debería poner esto en la sección mounted , pero aparece el siguiente error:
TypeError: Cannot read properties of undefined (reading 'getElementsByClassName')Así es como trato de agregar el oyente:
<script> import {VueBotUI} from 'vue-bot-ui' import {subscribeUser} from "../helpers/subscriptionHandler"; //import {getAlerte} from "../helpers/alerteHandler"; export default { //... mounted() { this.document.getElementsByClassName('qkb-bubble-btn ')[0].addEventListener('click', this.onBubbleClick); }, beforeDestroy () { navigator.serviceWorker.removeEventListener('message', event => { this.printPush(event); }); this.document.getElementsByClassName('qkb-bubble-btn ')[0].removeEventListener('click', this.onBubbleClick); }, methods: { onBubbleClick(){ console.log("click bubble") } }, } </script> ¿Cómo debo agregar el detector de eventos de clic al elemento qkb-bubble-btn ?
No necesita agregar un detector de eventos usted mismo,
solo usa @ y el nombre de tu evento en el botón:
<my-button @click="myClickMethod"/>Solo usa addEventListener si el elemento está fuera de la aplicación vue, pero si está dentro de la aplicación, entonces mejor use la forma vue de hacerlo
Y si el botón está dentro de otro componente, deberá usar $emit :
<my-button @click="$emit('click', $event)"/>Incluso si @ lk77 tiene razón, podría solucionar mi problema eliminando la palabra clave this delante de this.document...