How with Vue2Leaflet show 1 popup on opening - vuejs2

Question

In my #vue/cli 4.1.1 app I added Vue2Leaflet and with this example
https://jsfiddle.net/bezanyu/ptmg5hy7/
I created set of markers from array and I need to make some ofmarkers with opened popup content
if field opened from its structure equals true. Peovided example have such functionality, buit for 1 static marker.
I try to do is programmatically as :
<template>
<div class="frontend_item_container">
<b-container fluid>
<b-row class="my-1">
<b-col sm="2">
<label for="input-small">Small:</label>
</b-col>
<b-col sm="10">
<l-map
:zoom="zoom"
:center="center"
style="height: 100%; min-height: 800px !important;"
#update:zoom="zoomUpdated"
#update:center="centerUpdated"
#update:bounds="boundsUpdated"
>
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-marker
v-for="(nextMarker, index) in markers"
:key="'marker-' + index"
:lat-lng="nextMarker.location"
:icon="getIcon(nextMarker)"
:ref="setMarkerRef(nextMarker)"
> // REF ABOVE DOES NOT WORK!
<l-popup>
<span v-html="nextMarker.content_text"></span>
</l-popup>
</l-marker>
</l-map>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import appMixin from '#/appMixin';
import L from 'leaflet'
import {LMap, LTileLayer, LMarker, LPopup} from 'vue2-leaflet'
import 'leaflet/dist/leaflet.css';
export default {
data() {
return {
apiUrl: process.env.VUE_APP_API_URL,
date_value: '2019-01-25',
formatted_date_value: '',
zoom: 4, // 13
center: L.latLng(47.413220, -1.219482),
url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
attribution: '© OpenStreetMap contributors 1111 22222222 3333333333333',
markers: [{
id: 1,
location: L.latLng(47.413220, -1.219482),
color: '#c11a1a',
strokeColor: '#d73534',
circleColor: '#590000',
content_text: ' <strong>content text</strong> #1',
opened: true // this marker must be opened by default
}, {
id: 2,
location: L.latLng(49.413210, -3.211160),
color: '#38a938',
strokeColor: '#157315',
circleColor: '#ecc9c9',
content_text: ' content <strong>text #2</strong>',
opened: false
}]
}
}, // data() {
name: 'testPage',
mixins: [appMixin],
components: {
LMap,
LTileLayer,
LMarker,
LPopup
},
mounted() {
this.$nextTick(() => {
console.log('this.$refs.marker_1::')
console.log(this.$refs.marker_1)
this.$refs.marker_1.mapObject.openPopup()
})
}, // mounted() {
created() {
}, // created() {
beforeDestroy() {
},
methods: {
setMarkerRef(nextMarker) {// TRY TO SHOW POPUP
console.log('setMarkerRef nextMarker::')
console.log(nextMarker)
if (nextMarker.opened) {
return 'marker_' + nextMarker.id
}
},
zoomUpdated(a) {
console.log('zoomUpdated a::')
console.log(a)
},
centerUpdated(b) {
console.log('centerUpdated b::')
console.log(b)
},
boundsUpdated(c) {
console.log('boundsUpdated c::')
console.log(c)
},
getIcon(item) {
return L.divIcon({
className: "my-custom-pin",
html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 34.892337" height="60" width="40">
<g transform="translate(-814.59595,-274.38623)">
<g transform="matrix(1.1855854,0,0,1.1855854,-151.17715,-57.3976)">
<path d="m 817.11249,282.97118 c -1.25816,1.34277 -2.04623,3.29881 -2.01563,5.13867 0.0639,3.84476 1.79693,5.3002 4.56836,10.59179 0.99832,2.32851 2.04027,4.79237 3.03125,8.87305 0.13772,0.60193 0.27203,1.16104 0.33416,1.20948 0.0621,0.0485 0.19644,-0.51262 0.33416,-1.11455 0.99098,-4.08068 2.03293,-6.54258 3.03125,-8.87109 2.77143,-5.29159 4.50444,-6.74704 4.56836,-10.5918 0.0306,-1.83986 -0.75942,-3.79785 -2.01758,-5.14062 -1.43724,-1.53389 -3.60504,-2.66908 -5.91619,-2.71655 -2.31115,-0.0475 -4.4809,1.08773 -5.91814,2.62162 z" style="fill:${item.color};stroke:${item.strokeColor};"/>
<circle r="3.0355" cy="288.25278" cx="823.03064" id="path3049" style="display:inline;fill:${item.circleColor};"/>
</g>
</g>
</svg>`
});
},
} // methods: {
}
</script>
,
As a result no popup is opened and I got 1 warning the the console:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'openPopup' of undefined"
found in
---> <TestPage> at src/views/Test2.vue
<AppContainer> at src/App.vue
<Root>
Which is valid way ?
Thanks!

Answer 1

I found the decision with using of #ready as :
<l-marker
v-for="(nextMarker, index) in markers"
:key="'marker-' + index"
:lat-lng="nextMarker.location"
:icon="getIcon(nextMarker)"
#ready="openDefaultMarkers($event, nextMarker)"
>
...
openDefaultMarkers(mapObject, nextMarker) {
if (nextMarker.opened) {
mapObject.openPopup()
}
},