Ways to open and close popup manually

[amav96]

I currently have a map with several markers and their respective popups. When I click on each marker, its popups open correctly. But there are situations where I have a list of stops

<Stop>

where I would like to open the popup manually/programmatically. It is a list of stops that a driver makes. Currently I do it this way and it works perfectly. But the truth is that I don't know if it is correct or is the best way to do it or if there is a better and more efficient way.

<template>

  <Stop 
  v-for="(stop, index) in plan.tours[currentTour].stops" 
  :key="index" 
  :stop="stop"
  :numberStop="index + 1"
  :order="stop.order"
  :color="colors[currentTour]"
  :sortable="isSortableTourMode"
  @select="selectStop"
  />

  <MapboxMap
    v-if="(centerMap.lat && centerMap.lng) && plan && plan.tours"
    :accessToken="mapboxapikey"
    :mapStyle="myMap"
    :center="[centerMap.lng, centerMap.lat]"
    :zoom="centerMap.zoom"
    style="width: 100%; height: 100%;border-radius: 5px;"
    ref="refMap"
    >
    <template
    v-for="(tour, index) in plan.tours"
    :key="tour.id"
    >
        <MapboxMarker
        v-for="(stop, stopIndex) in tour.stops"
        :key="stopIndex"
        :lng-lat="[stop.location.lng, stop.location.lat]"
        popup
        :color="colors[index]"
        :scale="getMarkerScale(index, stopIndex)"
        :ref="(value: any) => addMarker(value, stop)"
        
        >
            <template v-slot:popup>
                <div>
                    {{ index  }}
                {{ stop.street }}
                </div>
            </template>
       </MapboxMarker>
    </template>
</MapboxMap>

<script setup lang="ts">
import { MapboxMap, MapboxMarker,  MapboxLayer } from '@studiometa/vue-mapbox-gl';

const centerMap = ref<{
    lat: number | null;
    lng: number | null;
    zoom: number
}>({
    lat: null,
    lng: null,
    zoom: 10
})
onMounted(() => {
    if (settings.value.startPlan.lat && settings.value.startPlan.lng) {
        centerMap.value.lat = settings.value.startPlan.lat
        centerMap.value.lng = settings.value.startPlan.lng
    }
})

const refMap = ref<any>(null)

const refMarkers = ref<Map<string, any>>(new Map());
const addMarker = (marker: any, stop: StopModel) => {
    refMarkers.value.set(stop.id, marker);
};

const selectStop = (value: { stop: StopModel, numberStop: number, order: number }) => {
    centerMap.value.lat = value.stop.location.lat
    centerMap.value.lng = value.stop.location.lng
    centerMap.value.zoom = 15
    refMarkers.value.forEach((marker) => {
        const popup = marker.$refs.popupRef.popup._marker.getPopup();
        if (popup && popup.isOpen()) {
            popup.remove();
        }
    });
    const currentMarker = refMarkers.value.get(value.stop.id);
    if(currentMarker){
        currentMarker.$refs.popupRef.popup._marker.togglePopup()
    }
}
</script>

[amav96]

@titouanmathis @perruche