Почему push-страница не работает в приложении VueJS onsen с использованием навигатора сплиттера и push-страницы? - PullRequest
Новая
       23

Почему push-страница не работает в приложении VueJS onsen с использованием навигатора сплиттера и push-страницы?

0 голосов
/ 14 февраля 2019

Я пытаюсь создать приложение onsen, используя vuejs, но я застрял в навигаторе push-страницы, где работает только сплиттер, не работает push-страница.ниже то, что я пробовал.(Я использую vue cli)

структура файлов 

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может подтвердить, что push_signin() метод работает, но, кажется, this.$emit('push-page',signin_tpl) не работает.Любая помощь, идеи, пожалуйста?

...