使用传单-vue-3我如何打开一个特定的现有弹出按钮？

Question

我在传单上有一堆标记

   <l-marker
        v-for="station in stations"
        :lat-lng="[station.lat, station.lon]"
        :options="{title: station.stationname}"
        autoPanOnFocus="true"
        keyboard="true"
        @click="closeAll()"
    >

 <l-icon :icon-size="[15,15]" :icon-url="'/img/bus.png'"/>
 <l-popup>
 .....
 </l-popup>
</l-marker>

如何编写一个方法，当单击按钮时，该方法将以编程方式识别和打开特定的弹出窗口？

Answer 1

这个问题的答案是使用ref，并调用ref的value.leafletObject.openPopup()函数。

若要在Vue3组合API中创建参考文献，请使用v-for模板引用将参考文献分配给标记。

        <l-marker
        v-for="station in stations"
        ref="stationRefs"
        :lat-lng="[station.lat, station.lon]"
        :options="{title: station.stationname}"
        autoPanOnFocus="true"
        keyboard="true"
        @click="closeAll()"
    >

在脚本中定义v-for引用。

import { ref } from "vue";

const stationRefs = ref([])

并从方法调用openPopup：

function nextStop(stops, station, stations, currentStop, itinerary) {
    let nextStop = stops.find((stop) => stop.itinerary_id == itinerary.id && stop.order == currentStop.order + 1);
    let nextStation = stations.find((station) => station.id == nextStop.station_id);
    if (nextStop) {

        let nextStopMarker = stationRefs.value.find((marker) => marker.options.title == nextStation.stationname);

        nextStopMarker.leafletObject.openPopup();

    } else {
        swal.fire({
            title: "No Next Stop",
            text: "There are no more stops for this itinerary",
            icon: "warning",
            button: "OK"
        });
    }
}