Help with transition in vue-onsenui-kitchensink

freedomotic

Hi all,
I’m adapting the example of transition to include a custom component into the template.
Here my code

template>
  <v-ons-page>
    <v-ons-list>
      <v-ons-list-item v-for="plugin in getPluginsList" :key="plugin.uuid"
        modifier="chevron"
        @click="transition('default', plugin)"
        tappable
      >
        {{ plugin.pluginName }}
      </v-ons-list-item>
    </v-ons-list>
    <v-ons-fab position="bottom right" :style="spdStyle">
        <v-ons-icon  style="color: green;" icon="md-add_circle"></v-ons-icon>
    </v-ons-fab>
  </v-ons-page>
</template>

<script>
import Plugin from './Plugin.vue'

const transitionPage = {
  template: `
    <v-ons-page>
      <custom-toolbar backLabel="Plugins">
        {{ plugin.pluginName }}
      </custom-toolbar>
      <plugin-component
         :name="plugin.pluginName" 
         :description="plugin.description"
         :uuid="plugin.uuid"
         :currentStatus="plugin.currentPluginStatus"
         :category="plugin.category"
       >
       </plugin-component>
     </v-ons-page>
    `
}

export default {
  props: ['pageStack', 'setOptions'],
  components: {
    'plugin-component': Plugin
  },
  data () {
    return {}
  },

  computed: {
    getPluginsList: function () {
      return this.$store.state.pluginsList
    }
  },

  methods: {
    transition (name, item) {
      this.setOptions({
        animation: name,
        plugin: item,
        callback: () => this.setOptions({})
      })

      this.pageStack.push({
        extends: transitionPage,
        data () {
          return {
            animation: name,
            plugin: item
          }
        }
      })
    }
  }
}
</script>

But <plugin-component> is not showed, only the <custom-toolbar>.
Thanks

freedomotic

No reply?

asialgearoid

It’s a bit hard to figure out what exactly might be causing your issue without being able to see the app itself. Could you reproduce the issue on https://onsen.io/playground/ and share a Codepen here?

freedomotic

It’s quite difficult because it’s part of a more complex application.
Anyway the source code is hosted here