Vue2Leaflet : how to display the tooltip of a specific marker - vue.js

Question

I'm using nuxt-leaflet (with Vue2Leaflet) and I'm wondering how to display the tooltip of a specific marker after cliquing on a button ("Display tooltip") in my template vue file ?
<template>
<div>
<button #click="displayTooltipOfMarker(x)">Display tooltip</button>
<div id="map-wrap" style="height: 500px; width:100%">
<no-ssr>
<l-map :zoom="10" :center="positionInitiale">
<l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
<l-marker :icon="customIcon" :lat-lng="positionMarqueurHome"></l-marker>
<l-marker
v-for="marker in marqueurs"
:key="marker.id"
:lat-lng.sync="marker.position"
#click="alert(marker)"
>
<l-popup :content="marker.tooltip"/>
<l-tooltip :content="marker.tooltip"/>
</l-marker>
</l-map>
</no-ssr>
</div>
</div>
</template>
Is it possible ?

Answer 1

To open/close Tooltip on external event (like button is your case) the folowing solution could be considered:
get access to Leaflet marker object via $refs attribute:
<l-marker
v-for="(marker, index) in markers"
:key="index"
ref="markersRef"
:lat-lng="marker.position"
>
<l-popup :content="marker.name"/>
</l-marker>
and save it into array:
mounted: function() {
this.$nextTick(() => {
this.markerObjects = this.$refs.markersRef.map(ref => ref.mapObject);
});
}
Once the external event is triggered (e.g. button click) the tooltip is getting displayed like this:
<button #click="displayTooltip(1)">Display</button>
displayTooltip(selectedIndex) {
this.markerObjects[selectedIndex].openTooltip();
}
Here is a demo for your reference