0
votes

Comment puis-je accéder aux réfs de références créées par programmation dans VUE.JS?

Je voudrais accéder aux réfs dans un composant VUE.JS, où la Ref elle-même est créée de manière dynamique comme suit: xxx

Cependant, cela semble ne pas fonctionner (voir ci-dessus dans les commentaires) , et je ne peux pas comprendre pourquoi.

vue.js vue-component

1 commentaires

Cela devrait fonctionner bien. Veuillez créer un Petite démo pour cela en utilisant codesandbox.io pour montrer le problème se produire.

3 Réponses :

0
votes

Essayez d'utiliser une chaîne de modèle E.G

`map${m}`

0 commentaires

0
votes

Vous devez attendre que des composants soient rendus / mis à jour. Cela fonctionne:

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: {
    },
}

0 commentaires

0
votes

Je pense que le problème est que vous êtes importer le composant asynchrone , avec httpvueloader , qui télécharge ensuite et importe le composant uniquement lorsque le composant est rendu de la DOM, Par conséquent, le composant n'a pas encore été importé dans le rappel de Nexttick.

Je vous suggère de mettre un événement chargé dans le composant carte.Vue, peut-être dans le cycle de vie monté, qui sera écouté dans le père, exemple @ charrid = "showrefs"

Sûrement lorsque la méthode showrefs () {} est invoquée, vous aurez vos réfs peuplés;)

0 commentaires

Articles qui pourrait vous intéresser : Est-il possible de créer une application vue sans vue-cli? Comprendre la liaison bidirectionnelle Vue JS v-model Vue.js 3 Event Bus Laravel Echo n'écoute pas