Accessing component methods without refs

[wishinghand]

When using Vue2Leaflet components in a v-for, I often have need to modify that specific one after an event, like dragging a marker. When I look for ways to access a specific Vue2Leaflet component, I usually see recommendations to set a ref on it, then calling this.$refs.refName.mapObject.componentMethod. Is there a way to pass the instance of a component through an event so that component methods can then be called on them?

[DonNicoJs]

@wishinghand I am thinking to add a 'ready' event to all the components that emit the mapObject back this would solve lots of problems actually

[wishinghand]

How might that look in practice?

[DonNicoJs]

Something like this:

<template>
<l-map ...>
<l-tile-layer ... />
<l-marker v-for="..." @ready="markerReady" />
</l-map>
</template>

<script>
export default {
methods: {
markerReady(mapObject) {
mapObject.openTooltip();
}
}
}

Ugly formatting aside this should solve your issue I think and also provide a reliable event where mapObject is always present

[DonNicoJs]

@wishinghand 2.1.0 is out with ready event on all the component

[wishinghand]

Is there a way to call @ready again? My predicament is like this:

<span v-for="gate in gates">
  <l-marker
    @moveend="updateGateCoords(gate, $event)"
    :lat-lng="gate.coordinates"
    :draggable="true"
  >
</span>

When I drag the l-marker, I use @moveend="updateGateCoords" to check if the marker is moved into an invalid area. If it's invalid, I'd like to call setLatLng on it with the previous coordinates from $event to move it back to where it started. This is where I'd need the mapObject for that specific l-marker, but I'm unsure of how to access it.

[DonNicoJs]

@wishinghand my suggestion is: wrap the l-marker in another component, that component should be a proxy that pass down any props and event but listen to the marker @ready and store the map object in an internal value say localMapObject then everytime u ran updateGateCoords you can pass up the stored localmapobject (sorry I am on mobile)

[DonNicoJs]

@wishinghand I received an email with an update from your issue but I can't find the message here. Did you delete it? is it solved for you now?

[wishinghand]

The issue is solved now. The comment I deleted was about not being able to access the @ready event but for some reason my branch reset my vue2leaflet version. After an npm install I was able to get this workaround to deliver the expected results.