Vue2leaflet: Open Marker Popup programmatically?

[Harti]

I cannot find any way to call marker.openPopup() when the LMarker object is being handled by this lib.

Is there any, are there workarounds such as emitting a click event on the marker? How would I get a hold of the L.Marker instance?

_PS:
I'm sorry for not using StackOverflow to ask this question. I figured that GitHub issues is the first place devs would look for solutions as per convention - furthermore SO is empty and I don't know if you even would get notified._

[DonNicoJs]

You can place a ref on the l-popup element ie: myPopup
then you can do:
this.$refs.myPopup.mapObject.openPopup()
you can also use the click event on the maker for that you can check this code:
https://github.com/pulilab/vue-people/blob/master/frontend/components/MapMarker.vue

[VVNoodle]

What worked for me is calling openPopup on the marker ref, instead of the popup.

[KarmaCop213]

You can place a ref on the l-popup element ie: myPopup
then you can do:
this.$refs.myPopup.mapObject.openPopup()
you can also use the click event on the maker for that you can check this code:
https://github.com/pulilab/vue-people/blob/master/frontend/components/MapMarker.vue

This doesn't work.

Link doesn't have anything related with refs.

this.$refs is always empty when I put it on my l-marker or l-popup. I'm trying to access the ref inside mounted hook and when @leaflet:load is triggered. Always empty on both.

[bezany]

@KarmaCop213 Check that you set ref='marker' attribute in template on l-marker. And check that this.$refs contains marker key. See example

[KarmaCop213]

@KarmaCop213 Check that you set ref='marker' attribute in template on l-marker. And check that this.$refs contains marker key. See example

Thanks you for your quick reply.
I went with a different approach: example
Not sure if this is acceptable too...

[DonNicoJs]

@KarmaCop213 I think your solution is good as well

[wishinghand]

I have a similar issue where I don't think refs will scale. I have a bunch of popups showing information. This information can also be referenced on a sidebar next to the map. When a user wants to edit the info in that popup, we have them click on an edit button on the sidebar corresponding to the marker they selected. We'd like to instead open the popup on that marker and let the user edit info in the popup. Any idea of how to open a single specific popup among many from a click outside of the Leaflet map?

[DonNicoJs]

@wishinghand you could check this component that we use on vue-people: https://github.com/pulilab/vue-people/blob/master/frontend/components/TooltipGroup.vue
and modify it for your needs. Basically you need one single tooltip and load his content accordingly, you can then open it on the latlng of the pin and it will work

[fchabouis]

I think it would be useful to explain this in the documentation, as you must set a ref to the parent marker, and call the openPopup function of it using this.$refs... but wrapped in a nextTick function, to make sure the DOM has been updated.

I wouldn't have guessed all that without this closed issue.
Thanks for this great lib !

[DonNicoJs]

@fchabouis would you be interested in making a pr for the docs?

[username40]

@Harti try to use LFeatureGroup https://vue2-leaflet.netlify.app/components/LFeatureGroup.html