从 Mapbox 弹出窗口调用 vue 方法答案

【问题标题】：Call vue method from Mapbox popup从 Mapbox 弹出窗口调用 vue 方法
【发布时间】：2021-05-21 13:16:50
【问题描述】：

我有一个地图框弹出窗口，在弹出窗口中我想要一个按钮来调用我的 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");
      });

【问题讨论】：

标签： javascript vue.js web vue-component mapbox

【解决方案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>

【讨论】：