Monaca Onsen UI Discord Chat Github Repo

vuejs onsen app using both splitter and push page navigator, push page not working



  • I’m trying to create an onsen app using vuejs but I’m stuck on push page navigator where only splitter is working, push page is not working. below is what I’ve tried. (I’m using vue cli)

    files structure
    
    src
        - components
            - Home.vue
            - Main.vue
            - Swipenav.vue
            - Toolbar.vue
    
        - App.vue
        - main.js
    

    Swipenav.vue

    <template>
        <v-ons-navigator swipeable :page-stack="pageStack" @push-page="pageStack.push($event)">
            <v-ons-page>
                <v-ons-splitter>
                    <v-ons-splitter-side swipeable
                        width="150px" collapse="" side="left"
                    :open.sync="openSide"
                    >
                        <v-ons-page>
                            <v-ons-list>
                                <v-ons-list-item v-for="page in pages" :key="page.id" tappable modifier="chevron" @click="currentPage = page.name; openSide = false"
                                >
                                    <div class="center">{{ page.title }}</div>
                                </v-ons-list-item>
                            </v-ons-list>
                        </v-ons-page>
                    </v-ons-splitter-side>
    
                    <v-ons-splitter-content>
                        <component :is="currentPage" :toggle-menu="() => openSide = !openSide"></component>
                    </v-ons-splitter-content>
    
                </v-ons-splitter>
            </v-ons-page>
        </v-ons-navigator>
    </template>
    
    
    <script>
    import main_tpl from './Main.vue'
    import home_tpl from './Home.vue'
    export default {
        name : "swipenav",
        data() {
            return {
                pageStack: [main_tpl],
                pages : [
                    { name : 'main_tpl', title : 'Main' },
                    { name : 'home_tpl', title : 'Home' },
                ],
                currentPage : 'home_tpl',
                openSide : false
            };
        },
        components : {
            home_tpl : home_tpl,
            main_tpl : main_tpl
        }
    }
    </script>
    

    Main.vue

    <template>
      <v-ons-page>
        <v-ons-toolbar>
          <div class="center">Main</div>
        </v-ons-toolbar>
        <p style="text-align: center">
          main page
          <v-ons-button @click="push_signin">Push signin</v-ons-button>
        </p>
      </v-ons-page>
    </template>
    
    <script>
    import signin_tpl from './Signin.vue';
    export default {
      name : 'mainpage_comp',
      methods : {
        push_signin(){
          console.log('working');
          this.$emit('push-page',signin_tpl)
        }
      }
    }
    </script>
    

    I can confirm this push_signin() method is working but seems this.$emit(‘push-page’,signin_tpl) is not working. Any help, ideas please?


  • administrators

    It might be to do with having defined both page-stack and a child page on the navigator. If you look at the example here you can see it doesn’t define any child elements: https://onsen.io/playground/?framework=vue&category=reference&module=navigator

    Do you have this in a git repo or something like that? If you can give a link to that, I’ll clone it and debug the problem.