Vuejs2 如何使用Vue2手册在打开时显示1个弹出窗口

在我的@vue/cli 4.1.1应用程序中，我添加了Vue2传单，并使用了此示例

我从数组中创建了一组标记，我需要用打开的弹出内容创建一些标记 如果从其结构打开的字段等于true。提供的示例具有这样的功能，为1个静态标记构建

我尝试以编程方式执行以下操作：

<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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> 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>
,

小型：
//上面的参考不起作用！
从“@/appMixin”导入appMixin；
从“传单”中导入L
从“vue2传单”导入{LMap、LTileLayer、LMarker、LPopup}
输入“传单/目录/传单.css”；
导出默认值{
数据（）{
返回{
apiUrl:process.env.VUE_APP_API_URL，
日期值：“2019-01-25”，
已格式化的\u日期\u值：“”，
缩放：4，//13
中心：L.latLng（47.413220，-1.219482），
url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png'，
归属：“©；贡献者1111222223333333”，
标记：[{
id:1，
地点：L.latLng（47.413220，-1.219482），
颜色：“#c11a1a”，
strokeColor:“#d73534”，
圆环颜色：“#590000”，
内容文本：'内容文本#1'，
opened:true//默认情况下必须打开此标记
}, {
id:2，
地点：L.latLng（49.413210，-3.211160），
颜色：“#38a938”，
strokeColor:“#157315”，
圆环颜色：“#ecc9c9”，
content_text:“contenttext#2”，
开放：假
}]
}
}，//数据（）{
名称：“testPage”，
mixin:[appMixin]，
组成部分：{
LMap，
第三层，
马克，
LPopup
},
安装的（）{
这个.$nextTick（（）=>{
console.log（'this.$refs.marker_1:：'）
console.log（此.$refs.marker_1）
这是.$refs.marker_1.mapObject.openPopup（）
})
}，//mounted（）{
创建（）{
}，//已创建（）{
在…之前{
},
方法：{
setMarkerRef（nextMarker）{//尝试显示弹出窗口
log（'setMarkerRef nextMarker:：'）
console.log（nextMarker）
如果（下一个Marker.opened）{
返回'marker_'+nextMarker.id
}
},
缩放更新（a）{
console.log（'zoomUpdate a:：'）
控制台日志（a）
},
中心更新（b）{
console.log（'centerUpdated b:：'）
控制台日志（b）
},
边界（c）{
console.log（'boundsUpdated c:：'）
控制台日志（c）
},
getIcon（项目）{
返回L.divIcon({
类名：“我的自定义pin”，
html:`
`
});
},
}//方法：{
}
,

因此，没有打开弹出窗口，我在控制台上收到1条警告：

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>

vue.runtime.esm.js？2b0e:619[vue warn]：下一步错误：“TypeError:无法读取未定义的属性“openPopup”
发现于
--->在src/views/Test2.vue
在src/App.vue

哪种方法有效

---

谢谢！

我找到了使用@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()
            }
        },