How add VueJS event listenner on a component in the mounted section-CodePudding

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 ?

CodePudding user response：

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)"/>

CodePudding user response：

Even if @lk77 is right, I could fix my issue by removing the keyword this in front of this.document...