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 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



  • No reply?


  • Onsen UI

    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


Log in to reply