从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>