I important a componant and I want to attach an event listenner to the button element which has the class qkb-bubble-btn.
I understand the fact I should put this in the mounted section but I get the following error :
TypeError: Cannot read properties of undefined (reading 'getElementsByClassName')
Here is how I try to add the listenner :
<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>
How should I add the click event listenner to the qkb-bubble-btn element ?
You don't need to add an event listener yourself,
you just use @ and the name of your event on the button :
<my-button @click="myClickMethod"/>
You only use addEventListener if the element is outside of vue app, but if it's inside the app, then better use vue way of doing it
And if the button is inside another component you will need to use $emit :
<my-button @click="$emit('click', $event)"/>
Even if @lk77 is right, I could fix my issue by removing the keyword this in front of this.document...