Help with transition in vue-onsenui-kitchensink
-
Hi all,
I’m adapting the example of transition to include a custom component into the template.
Here my codetemplate> <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
-
No reply?
-
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?
-
It’s quite difficult because it’s part of a more complex application.
Anyway the source code is hosted here