Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
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