質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

解決済

OnsenUI(Vue)の画面遷移の方法がわからない

Sho_m
Sho_m

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

1回答

0評価

0クリップ

2893閲覧

投稿2018/02/01 05:33

編集2022/01/12 10:58

OnsenUI(Vue)の画面遷移の方法がわからない

OnsenUIの画面遷移方法に悩んでいます。

質問者のレベルは

  • OnsenUIは初めて
  • Vueは試してみた程度に触っている
  • Javascriptは1年以上

となります。

現在の仕様として下図の様に、初期情報入力画面として、P1とP2を設置しており、
それが済み次第、メインページであるT1-P1へと遷移します。

しかし、T1-P1からP2への遷移もしてほしいとのことで、試行錯誤しています。

T1-P1からemitを行って
Tab1 -> TabBar -> App(ここでp2をStackに代入) -> p2
という処理を行っています。
画面遷移自体はできているのですが、下記の様なエラーが
発生してしまいます。
「vendor.bundle.js:6 TypeError: Cannot read property 'children' of undefined」

ナビゲーターやTab内で遷移したいという要望もあり、複雑になってしまい、
私自身も整理がつかなくなってきてしまいました...。

そもそもこの遷移方法(コードの書き方として)が正しいものなのか...とも感じております。

画面遷移そのものがおかしいと言われても困ってしまいますので、
どうか、この遷移を実現できる術を教えて頂きたいです。

よろしくお願いいたします。

イメージ説明

ソースコード

t1p1.vue

<template> <v-ons-page> <custom-toolbar>tab1</custom-toolbar> tab1 <v-ons-button @click="back">戻る</v-ons-button> </v-ons-page> </template> <script> import customToolbar from './CustomToolbar'; export default { methods: { back() { this.$emit('changePage'); } }, components: { customToolbar } } </script>

tab1.vue

<template> <v-ons-navigator :page-stack="pageStack" @changePpage="changePpage"> </v-ons-navigator> </template> <script> import t1p1 from './t1p1'; export default { methods: { changePpage() { this.$emit('changePpage'); } }, data() { return { pageStack: [t1p1] } }, props: [] } </script>

tabbar.vue

<template> <v-ons-page> <v-ons-tabbar @changePage="changePage" class="tabs" position="bottom" :visible="true" animation="none" :tabs="tabs" :index.sync="tabIndex"> </v-ons-tabbar> </v-ons-page> </template> <script> import tab1 from './tab1.vue'; import tab2 from './tab2.vue'; export default { methods: { changePage() { this.$emit('changePage'); } }, data() { return { tabIndex: 0, tabs: [ { icon: 'ion-home', label: 'tab1', page: tab1, }, { icon: 'md-file', label: 'tab2', page: tab2, } ] } } } </script> <style>
<template> <v-ons-navigator :page-stack="pageStack" @push="push($event)" @changePage="changePage"> </v-ons-navigator> </template> <script> import p1 from './Page1'; import p2 from './Page2'; export default { methods: { push(pageNumber) { this.pageStack.push(pages[pageNumber - 1]); }, changePage(e) { this.currentPage = p2; } }, data() { return { pageStack: [p1] } }, components: { p1, p2} } </script>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。