前提・実現したいこと
Onsen ui 初学者です
勉強としてonsen uiのコンポーネントを使いたいです
コピペして使ってみたのですが、ブラウザにはなにも表示されませんでした
表示するには、他にはなにが必要でしょうか?
また、以下のようなエラーも直したいです.
よろしくお願いします。
発生している問題・エラーメッセージ
TypeError: Cannot read property 'platform' of undefined at hn.md (app.js:48) at hn.data (app.js:22) at hn.<anonymous> (vue:6) at vue:6 at vue:6 at jt (vue:6) at hn._init (vue:6) at new hn (vue:6) at app.js:14 He @ vue:6
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 7 8 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 9 <script src="js/app.js"></script> 10 11 <script src="lib/onsen/js/onsenui.js"></script> 12 <link rel="stylesheet" href="lib/onsen/css/onsenui.css"> 13 <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"> 14 15 16</head> 17 18<body> 19 <template id="main"> 20 <v-ons-page> 21 <v-ons-toolbar> 22 <div class="center">{{ title }}</div> 23 </v-ons-toolbar> 24 25 <v-ons-tabbar swipeable position="auto" 26 :tabs="tabs" 27 :visible="true" 28 :index.sync="activeIndex" 29 > 30 </v-ons-tabbar> 31 </v-ons-page> 32 </template> 33 34 <template id="home"> 35 <v-ons-page> 36 <p style="text-align: center"> 37 Welcome home.<br><br>{{ myProp }} 38 </p> 39 </v-ons-page> 40 </template> 41 42 <template id="news"> 43 <v-ons-page> 44 <p style="text-align: center"> 45 Some news here. 46 </p> 47 </v-ons-page> 48 </template> 49 50 <template id="settings"> 51 <v-ons-page> 52 <p style="text-align: center"> 53 Change the settings. 54 </p> 55 </v-ons-page> 56 </template> 57 58 <div id="app"></div> 59 60 61 62</body> 63 64</html> 65
javascript
1const homePage = { 2 template: '#home', 3 props: ['myProp'] 4}; 5 6const newsPage = { 7 template: '#news' 8}; 9 10const settingsPage = { 11 template: '#settings' 12}; 13 14var vm = new Vue({ 15 el: '#app', 16 template: '#main', 17 data() { 18 return { 19 activeIndex: 0, 20 tabs: [ 21 { 22 icon: this.md() ? null : 'ion-home', 23 label: 'Home', 24 page: homePage, 25 props: { 26 myProp: 'This is a page prop!' 27 }, 28 key: "homePage" 29 }, 30 { 31 icon: this.md() ? null : 'ion-ios-bell', 32 label: 'News', 33 page: newsPage, 34 badge: 7, 35 key: "newsPage" 36 }, 37 { 38 icon: this.md() ? null : 'ion-ios-settings', 39 label: 'Settings', 40 page: settingsPage, 41 key: "settingsPage" 42 } 43 ] 44 }; 45 }, 46 methods: { 47 md() { 48 return this.$ons.platform.isAndroid(); 49 } 50 }, 51 computed: { 52 title() { 53 return this.tabs[this.activeIndex].label; 54 } 55 } 56});
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/29 15:12