CODEWITHSUNDEEP
javascriptiframevue.jscomponentstransition
Kyle Y.
Kyle Y.

Reputation: 175

How to load an element inside a component after a specific transition event

I'm using vuejs for a project. I have an iframe inside the template of a component that is loaded dynamically with vue-router. I'm using a transition effect around the router-view. It works nicely, but when I load the component containing the iframe into the router-view, the loading of the iframe lags my transition.

My idea is to have the specific iframe that's causing the problem load after the transition is finished, more specifically on the "after-enter" event. However, I cannot figure out a solution that works. See this excerpt:

<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

I have tried many different things in my component and vm objects and nothing has worked. This is an example of what I'm trying:

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;
    }
  }
)};

I can't seem to find a way to dynamically change the variable in the component. Am I approaching this correctly? Normally I would just use a prop and bind the prop to a variable in the vm, but since in this case the component is being loaded dynamically by the router that doesn't seem to be an option. Is there a way to bind the after-enter event to a method inside the component? How should I go about doing this?

Thanks for the help.

Upvotes: 0

Views: 404

Answers (1)

Kyle Y.
Kyle Y.

Reputation: 175

I figured it out. The solution was to simply add a props option to the router in my app like this:

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

And the HTML:

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

Now I'm able to use props that load into router-view like normal.

Upvotes: 1

Related Questions