Comment charger un élément dans un composant après un événement de transition spécifique

Question

J'utilise vuejs pour un projet. J'ai un iframe dans le template d'un composant qui est chargé dynamiquement avec vue-router. J'utilise un effet de transition autour de la vue du routeur. Cela fonctionne bien, mais lorsque je charge le composant contenant l'iframe dans la vue du routeur, le chargement de l'iframe est en retard sur ma transition.

Mon idée est d'avoir le iframe spécifique qui cause le problème après la transition, plus spécifiquement sur l'événement "after-enter". Cependant, je ne peux pas trouver une solution qui fonctionne. Voir cet extrait:

<scroll-content> 
<div class="scrollContentContainer"> 
    <transition name="slide" mode="out-in" v-on:after-enter="afterEnter"> 
    <router-view></router-view> 
    </transition> 
</div> 

<template id="soundComp"> 
... 
<iframe id="musicPlayer" v-if="$data.showPlayer"> 
</template 

J'ai essayé beaucoup de choses différentes dans mon composant et des objets vm et rien n'a fonctionné. Ceci est un exemple de ce que j'essaie:

const soundComp = Vue.component('sound-comp', { 
    template: "#soundComp", 
    data: function() { 
    return { 
     showPlayer: false, 
    } 
    } 
}); 

const app = new Vue({ 
    el: '#app', 
    data: { 
    triangleClass: '', 

    }, 
    methods: { 
    afterEnter: function() { 
     //Change variable in component to true; 
    } 
    } 
)}; 

Je n'arrive pas à trouver un moyen de changer dynamiquement la variable dans le composant. Est-ce que j'approche cela correctement? Normalement, je voudrais juste utiliser un accessoire et lier le prop à une variable dans le VM, mais puisque dans ce cas, le composant est chargé dynamiquement par le routeur qui ne semble pas être une option. Existe-t-il un moyen de lier l'événement after-enter à une méthode dans le composant? Comment dois-je faire cela?

Merci pour l'aide.

Answer 1

Je l'ai compris. La solution était d'ajouter simplement une option d'accessoires au routeur dans mon application comme ceci:

const routes = [ 
    {path: '/sound', component: soundComp, props: true}, 
]; 

Et le code HTML:

<router-view v-bind:showplayer="showPlayer"> 

Maintenant, je suis en mesure d'utiliser des accessoires qui se chargent en routeur vue comme d'habitude