从 Mapbox 弹出窗口调用 vue 方法

Question

我有一个 mapbox 弹出窗口，在弹出窗口内我想要一个按钮来调用 vue 组件内定义的方法。

我的弹出窗口：

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

我的方法：

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

我能够向按钮添加一个事件侦听器，该按钮正在工作。但我没有得到在我的 Vue 组件中定义的函数执行。

我的事件监听器：

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

Answer 1

您可以使用setDOMContent代替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>