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

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

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

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

JavaScript

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

Monaca

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

Q&A

解決済

2回答

365閲覧

【monaca】Vue.jsを使用したいが#appを読み取ってもらえない

terame120

総合スコア14

Vue.js

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

JavaScript

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

Monaca

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

0グッド

1クリップ

投稿2018/11/23 12:26

編集2018/11/23 12:39

前提・実現したいこと

【実機でのVue.jsの作動】

monaca初心者です。コーディングも勉強中です。
自分用にアプリを作りたく、挑戦しています。

順序的には、monacaの前に、①ページを単体ずつコーディングしてブラウザで確認、②成功したらmonacaのindex.htmlの該当すると思われる場所に記述、③うまくいかなければmonacaで単体ページにバラして検証、という形で行っていました。

(③の段階です)
Vue.jsをmonacaで使用しようとしたところ、作動せず、コンソールに
[Vue warn]: Cannot find element: #app
と出ましたので、調べて、HTMLを読み込む前に作動させてしまってることが原因だと知り、イベントリスナー「DOMContentLoaded」を使用することで解決できました。
(Vue.jsは#app内で動くのだと思います)

このテストは簡易的に単体ページで行いました。成功したら、2つのタブで構成されていて、2つ目のタブがナビゲーションでページ遷移したその先に移動させようと思っていました。
移動させてみるとVue.jpの読み込みが成功しました。よし!と思ったら実機デバッグでは動いていませんでした。
同様に[Vue warn]: Cannot find element: #app とエラーが出ます。
単体ページの時では、実機で動いていました。

テストでは、bodyタグの下に<div id="app">がありますが、移動先ではappの前にタブ1のコードがあったり、ons-templateやons-pageの中にappがあるからいけないのかと思い、こちらのページでもbody直下に<div id="app">を入れてみました。すると、Vue.jsが読み込まれる代わりに、タブ、ほかのページが消え去り、テストと同じページのみ表示されるようになりました。

divの位置をいくつか試してみたところ、先頭以外では実機では#appを認識してくれません。

先頭以外に設置した#appを読み取ってくれない理由がわかりません。
bodyタグ直下以外の<div id="app">で、Vue.jsを作動させる方法はあるでしょうか。
または、どこか記述、解釈を間違えているのでしょうか。

ごくごく初心者なのですが、もしできる範囲であれば挑戦したいです。アドバイスをいただけますと嬉しいです。

発生している問題・エラーメッセージ

[Vue warn]: Cannot find element: #app

該当のソースコード

html

1 2<!DOCTYPE HTML> 3<html> 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 8 <script src="components/loader.js"></script> 9 <script src="vue.js"></script> 10 <script src="main.js"></script> 11 12 <script src="lib/onsenui/js/onsenui.min.js"></script> 13 14 <script> 15 // Page init event 16 document.addEventListener('init', function(event) { 17 var page = event.target; 18 19 if (page.matches('#first-page')) { 20 21 page.querySelector('#li01').onclick = function() { 22 document.querySelector('#navigator').pushPage('li01.html'); 23 }; 24 25 } else if (page.matches('#second-page')) { 26 page.querySelector('#pop-button').onclick = function() { 27 document.querySelector('#navigator').popPage(); 28 }; 29 30 } 31 }); 32 </script> 33 <script> 34 // Page init event 35 document.addEventListener('init', function(event) { 36 var page = event.target; 37 38 if (page.matches('#first-page')) { 39 40 page.querySelector('#li02').onclick = function() { 41 document.querySelector('#navigator').pushPage('li02.html'); 42 }; 43 44 } else if (page.matches('#second-page')) { 45 46 page.querySelector('#pop-button').onclick = function() { 47 document.querySelector('#navigator').popPage(); 48 }; 49 50 } 51 }); 52 </script> 53 54 <link rel="stylesheet" href="components/loader.css"> 55 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 56 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 57 <link rel="stylesheet" href="css/style.css"> 58 59 <script> 60 ons.ready(function() { 61 console.log("Onsen UI is ready!"); 62 }); 63 64 document.addEventListener('show', function(event) { 65 var page = event.target; 66 var titleElement = document.querySelector('#toolbar-title'); 67 68 if (page.matches('#first-page')) { 69 titleElement.innerHTML = 'My app - Page 1'; 70 } else if (page.matches('#second-page')) { 71 titleElement.innerHTML = 'My app - Page 2'; 72 } 73 }); 74 </script> 75 76</head> 77<body> 78 79 <ons-page> 80 <ons-toolbar> 81 <div class="center" id="toolbar-title"></div> 82 </ons-toolbar> 83 <ons-tabbar position="bottom"> 84 <ons-tab label="memo" page="tab1.html" active> 85 </ons-tab> 86 <ons-tab label="list" page="tab2.html"> 87 </ons-tab> 88 </ons-tabbar> 89 </ons-page> 90 91 <ons-template id="tab1.html"> 92 93 <ons-page id="first-page"> 94 95 <!--【タブ1の内容】--> 96 97 </ons-page> 98 </ons-template> 99 100 <ons-template id="tab2.html"> 101 102 <ons-page id="second-page"> 103 104 <ons-navigator id="navigator" page="page1.html"></ons-navigator> 105 106 <ons-template id="page1.html"> 107 <ons-page id="first-page"> 108 <ons-toolbar> 109 <div class="center">Page 1</div> 110 </ons-toolbar> 111 112   <!--【タブ2 1ページ目】Aクリックでページ遷移 --> 113 <li id="li01"><a>A</a></li> 114 <li id="li02"><a>B</a></li> 115 </ons-page> 116 </ons-template> 117 118 <ons-template id="li01.html"> 119<!-- #app挿入位置 --> 120 <div id="app"> 121 <ons-page id="second-page"> 122 <ons-toolbar> 123 <div class="left"><ons-back-button>Page 1</ons-back-button></div> 124 <div class="center">Page 2</div> 125 </ons-toolbar> 126 <!--【タブ2 ページ遷移後】--> 127 128 </ons-page> 129 130 </ons-page> 131<!-- #app終 --> 132 </div> 133 </ons-template> 134 135</body> 136</html>

【main.jsの「DOMContentLoaded」の場所】

js

1document.addEventListener("DOMContentLoaded", function(event) { 2new Vue({ 3 el: '#app', 4 data: { 5・・・・・・・・

試したこと

<div id="app"></div>の位置変更ーbodyタグ直下では認識するが構造が破綻する、それ以外の場所は認識せず

#app→.appに変更してidをclassにー実機×

新規でタブのテンプレートで作成しタブ2に<div id="app"></div>を挿入し実機テストー同様のエラー(#appがみつからない)

補足情報(FW/ツールのバージョンなど)

バーが2つ重なったりレイアウトひどいものですが、ひとまず動くことを確認してから調整したいので、そういうところの指摘はなしでお願いしたいです。

クラウドIDEで書いていました。IDEのプレビューでは成功しています。
実機はXperia Z5にて。
IDEと実機では読み込み順が違うという情報を見たので、その辺が問題なのかと推測しましたが、読み込み順が違うからだとしてもどう改善すればいいのか分かりません。(誤った推測かもしれませんが)

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

直接的な解決法でなくてすみません。

参考になるかわかりませんが、
デバッグ方法として、monaca templateでVue.jsのものを選択し、
期待するコードを書いて実行・比較してみるのはいかがでしょうか。何か発見の糸口になるかもしれません。
また、現状のソースコードを見るかんじですと、vueの恩恵を受けづらい構造になっているように感じます。

追伸:
コードの下部、<!-- #app終 -->あたりの閉じタグが、ほかの閉じタグを挟んでいたり、
おかしなことになっていました。IDEにもコードフォーマット(右クリからコードフォーマット)があるので活用してみてください。

投稿2018/11/24 19:37

tyama_jp

総合スコア17

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

terame120

2018/11/27 06:38

ご回答いただき、本当にありがとうございます。 試してみたいと思います。 まったくわからなかった状況が少しわかり、うれしく思います。
guest

0

自己解決

解決方法…とは違うかもしれませんが、monacaに当てはめるのではなく、元のコードをAdobe PhoneGap Buildでビルドしてみると作動しました。
UIに関してmonacaが助かりますし、ご回答のおかげで少し前に進めるかもしれないので、monacaをすこし試したらphonegapを試してみたいと思います。

投稿2018/11/27 06:44

terame120

総合スコア14

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問