前提・実現したいこと
【実機での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と実機では読み込み順が違うという情報を見たので、その辺が問題なのかと推測しましたが、読み込み順が違うからだとしてもどう改善すればいいのか分かりません。(誤った推測かもしれませんが)
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/27 06:38