Как мне получить доступ к программно созданным ссылкам в vue. js?

Question

Я хотел бы получить доступ к ссылкам в компоненте vue. js, где сам ref создается динамически следующим образом:

<style>
</style>
<template>
  <div>
    <lmap class="map" v-for="m in [1, 2, 3]" :ref="'map' + m"></lmap>
  </div>
</template>
<script>
module.exports = {
    components: {
        lmap: httpVueLoader('components/base/map.vue'),
    },
    mounted: function(){
        console.log('all refs', this.$refs);
        // prints an object with 3 keys: map1, map2, map3

        console.log('all ref keys', Object.keys(this.$refs));
        // would expect ["map1", "map2", "map3"], prints an empty array instead
        Vue.nextTick().then(() => {
            console.log('map1', this.$refs["map1"]);
            // would expect a DOM element, instead prints undefined
        })
    },
    destroyed: function(){

    },
    methods: {

    },
}
</script>

Однако это, похоже, не работает (см. Выше в комментарии), и я не могу понять почему.

Answer 1

Вы должны подождать, пока компоненты будут отрисованы / обновлены. Это работает:

module.exports = {
    data: function () {
        return {
        };
    },
    components: {
        lmap: httpVueLoader('components/base/map.vue'),
    },
    mounted: function(){
    },
    destroyed: function(){
    },
    updated: function(){
        Vue.nextTick().then(() => {
            console.log('all ref keys', Object.keys(this.$refs));
            console.log('map1', this.$refs['map1'][0].$el);
        })
    },
    methods: {
    },
}

Answer 2

Я думаю, проблема в том, что вы импортируете компонент асинхронно с httpVueLoader , который затем загружает и импортирует компонент только тогда, когда компонент визуализируется из dom, поэтому компонент еще не был импортирован в обратный вызов nextTick.

Я предлагаю вам поместить загруженное событие на карту. vue компонент, возможно, в смонтированном жизненном цикле, который будет прослушиваться в отце, например, @loaded = "showRefs"

обязательно, когда вызывается метод showRefs () {} , ваши ссылки будут заполнены;)

Answer 3

Попробуйте использовать строку шаблона, например,

`map${m}`