Q&A
ブラウザでのvue.jsの読み込みができず{{***}}となってしまいます。しかし、codepenで同じ内容のものを試すと正しく実行されます。解決策を教えてくださると嬉しいです。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 6 <title>UltraSole</title> 7 <script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script> 8 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script> 9 <script src="js/index.js"></script> 10 </head> 11 <main> 12 <script src="https://unpkg.com/vue"></script> 13 14 <div id="app"> 15 <h1>{{ message }}</h1> 16<!-- 配列のindex+2が実際の番号 --> 17 <div class="books" v-for="(value1,index) in values1"> 18 <div class="books" v-if="index===values1.length-1"> 19 20 <div class="info"> 21 <div class="title"><i class="book icon"></i> {{value1.time}}</div> 22 <div class="title"><i class="book icon"></i> {{value1.value1}}</div> 23 <div class="title"><i class="book icon"></i> {{ index }}</div> 24 </div> 25 26 </div> 27 </div> 28 29 <div class="books" v-for="(value2,index) in values2"> 30 <div class="books" v-if="index===values2.length-1"> 31 32 <div class="info"> 33 <div class="title"><i class="book icon"></i> {{value2.time}}</div> 34 <div class="title"><i class="book icon"></i> {{value2.value2}}</div> 35 <div class="title"><i class="book icon"></i> {{ index }}</div> 36 </div> 37 38 </div> 39 </div> 40 41 <div class="books" v-for="(value1,index) in values1"> 42 <div class="books" v-if="index===values1.length-1"> 43 <div class="books" v-for="(value2,index) in values2"> 44 <div class="books" v-if="index===values2.length-1"> 45 <div class="books" v-if="value1.value1<=value2.value2"> 46 a 47 </div> 48 <div class="books" v-if="value1.value1>=value2.value2"> 49 b 50 </div> 51 </div> 52 </div> 53 </div> 54 </div> 55 56 </div> 57 </main> 58</html>
js
1 2new Vue({ 3 el: '#app', 4 data () { 5 return { 6 message: 'MESH', 7 values1: [], 8 values2: [], 9 } 10 11 }, 12 13 mounted () { 14 fetch( 15 'https://script.google.com/macros/s/AKfycbzXZXE6twyHpRaZAfOgb0S1hc0EcpxrcCwleHqFZXUj_FvgXeMu/exec', 16 ) 17 .then(res => res.json()) 18 .then( 19 result => { 20 this.values1= result 21 }, 22 error => { 23 24 }, 25 ); 26 fetch( 27 'https://script.google.com/macros/s/AKfycbwAXqF2Idm69c508IcIu5CjW61LBplVkblIFrNVgMokNITl9VDM/exec', 28 ) 29 .then(res => res.json()) 30 .then( 31 result => { 32 this.values2 = result 33 }, 34 error => { 35 36 }, 37 ); 38 }, 39 40 41 42})
回答1件
0
Vue インスタンスをマウントするタイミングが早すぎるのが原因ではないでしょうか。
提示いただいているコードが js/index.js なら、Vue に解釈してほしい {{ }} などのコンテンツが存在する前に Vue インスタンスが生成され、要素にマウントしようとして失敗していると思います。
提示いただいているスクリプトを読み込んでいる <script> タグを body の最下部に持ってくるか、document のロードイベントの後で実行するようにしてみてください。
↓ body 最下部での読み込み
html
1<html> 2<body> 3 ... 中略 ... 4 <script src="js/index.js></script> 5</body> 6</html>
↓ロードイベント(正確には DOMContentLoaded イベント)後の実行
javascript
1document.addEventListener('DOMContentLoaded', () => { 2 new Vue({ 3 ... 中略 ... 4 }) 5})
投稿2019/06/02 08:18
総合スコア1086
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。