Call vue method from Mapbox popup

Viewed 659

I have a mapbox popup, and inside the popup I would like a button to call a method defined inside my vue component.

My popup:

const popup = new mapboxgl.Popup({ focusAfterOpen: false })
        .setLngLat(coordinates)
        .setHTML('<button id="button" @click="myMethod">Click here!</button>')
        .addTo(map);

My method:

myMethod() {
  console.log("clicked");
},

I was able to add an event listener to the button, which is working. But I don't get a function execute which is defined inside my Vue comonent.

My Event Listener:

var button = document.getElementById("button");
      button.addEventListener("click", function() {
        console.log("clicked");
      });
1 Answers

You can use setDOMContent instead of setHTML

<template>
 <div id="map"></div>
 <div id="popup" ref="htmlPopup" @click="popupclicked">
</div>
</template>

<script>

...
addPopup() {
    const popup = new mapboxgl.Popup({ focusAfterOpen: false })
        .setLngLat(coordinates)
        .setDOMContent(this.$refs.htmlPopup)
        .addTo(map);
} 
popupclicked () {
   console.log("Popup clicked");
}
...
</script>
Related