Q&A
省略した前半はどうなっていますか？（<body>以降だけで大丈夫かと思いますが）
前提・実現したいこと
CDN版Vue.jsとPHPを用いて開発を行っています。
発生しているエラーメッセージを見ますと、末尾にて</script></div>となっている箇所がありました。
ソースコードと見比べてもこのような状態ではありませんでしたので、困ってしまいました。
下記のエラーを解決したいです。
発生している問題・エラーメッセージ
vue.js:634 [Vue warn]: Error compiling template: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed. 251| 252| <!-- import Vue before Element --> 253| <script src="https://unpkg.com/vue/dist/vue.js"></script> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 254| <!-- import JavaScript --> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 255| <script src="https://unpkg.com/element-ui/lib/index.js"></script> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 256| <!-- import axios before Element --> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 257| <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 258| | 259| <script> | ^^^^^^^^^^^^^^^^ 260| new Vue({ | ^^^^^^^^^^^^^^^^^ 261| el: "#app", | ^^^^^^^^^^^^^^^^^^^^^^^ 262| data: { | ^^^^^^^^^^^^^^^^^^^ 263| input: '', | ^^^^^^^^^^^^^^^^^^^^^^^^^^ 264| value1: false, | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 265| textarea: '', | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 266| info: null | ^^^^^^^^^^^^^^^^^^^^^^^^^^ 267| }, | ^^^^^^^^^^^^^^ 268| }); | ^^^^^^^^^^^ 269| </script></div> | ^^^^^^^^^^^^^^^^^^^^^^^ (found in <Root>)
該当のソースコード
index.php
1 2<html> 3 <!-- ヘッドタグ --> 4 <?php require('head_pc.php'); ?> 5 6 <body> 7 <div id="app"> 8 <div class="songsSearch"> 9 <!-- ヘッダー --> 10 <?php require('header_pc.php'); ?> 11 12 <!-- 検索ページ --> 13 <?php require('search_form_pc.php'); ?> 14 15 <?php if ($_POST['submit'] === NULL) : ?> 16 17 <!------------------------------------------------------------- 検索前のページ -------------------------------------------------------------> 18 19 <el-row class="songsSearch__usage"> 20 <el-col :span="8" v-for="(o, index) in 3" :key="o" :offset="index > 0 ? 1 : 0"> 21 <el-card :body-style="{ padding: '0px' }"> 22 23 <div class="songsSearch__card" v-if="index === 0"> 24 <img src="img/introduction1.jpg" class="songsSearch__cardImage"> 25 <div style="padding: 14px;"> 26 <span class="songsSearch__cardTitle">「好き」を増やそう</span> 27 <div class="songsSearch__cardBottom songsSearch__cardClearfix"> 28 <time class="songsSearch__cardDescription">Songsを使えば、あなたの「好き」がもっと広がる。</time> 29 </div> 30 </div> 31 </div> 32 33 <div class="songsSearch__card" v-if="index === 1"> 34 <img src="img/introduction2.jpg" class="songsSearch__cardImage"> 35 <div style="padding: 14px;"> 36 <span class="songsSearch__cardTitle">アーティスト名を入力するだけ。</span> 37 <div class="songsSearch__cardBottom songsSearch__cardClearfix"> 38 <time class="songsSearch__cardDescription">関連するアーティストを自動で表示します。</time> 39 </div> 40 </div> 41 </div> 42 43 <div class="songsSearch__card" v-if="index === 2"> 44 <img src="img/introduction3.jpg" class="songsSearch__cardImage"> 45 <div style="padding: 14px;"> 46 <span class="songsSearch__cardTitle">「好き」を見つけよう。</span> 47 <div class="songsSearch__cardBottom songsSearch__cardClearfix"> 48 <time class="songsSearch__cardDescription">検索結果から、すぐにSpotifyの再生画面へ。</time> 49 </div> 50 </div> 51 </div> 52 </el-card> 53 </el-col> 54 </el-row> 55 56 <?php else : ?> 57 <!------------------------------------------------------------- 検索後のページ -------------------------------------------------------------> 58 59 <!-- 検索してもヒットしない＆＆検索ボタンを押している --> 60 <?php if ($artistData === NULL && $_POST['submit'] === ""): ?> 61 <el-alert 62 title="アーティストが見つかりませんでした。" 63 type="error" 64 center 65 description="別のアーティストを入力してみましょう。" 66 show-icon> 67 </el-alert> 68 <?php endif; ?> 69 70 <!-- 通常の状態 --> 71 <?php require('search_result_pc.php'); ?> 72 <?php endif; ?> 73 74 <!-- フッター --> 75 <?php require('footer_pc.php'); ?> 76 </div> 77 </div> 78 79 <!-- import Vue before Element --> 80 <script src="https://unpkg.com/vue/dist/vue.js"></script> 81 <!-- import JavaScript --> 82 <script src="https://unpkg.com/element-ui/lib/index.js"></script> 83 <!-- import axios before Element --> 84 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 85 86 <script> 87 new Vue({ 88 el: "#app", 89 data: { 90 input: '', 91 value1: false, 92 textarea: '', 93 }, 94 }); 95 </script> 96 </body> 97</html> 98
試したこと
調べたところdivタグの閉じ忘れが原因との記述がありましたが、自分で見つけることは出来ませんでした。
(chromeの拡張機能であるHTMLエラーチェッカーを用いて＆目視にて確認)
もし他に原因となる事象などございましたらご教授頂きたいです。
よろしくお願いいたします。
前半部分も追加いたしました。少々見づらいかもしれませんがご容赦ください。
コンポーネントを切り出している部分も多くありますので、そのそれぞれに対してもう一度自分でもdivタグの閉じ忘れがないか検証してみたいと思います。
ご協力頂きありがとうございます。
あなたの回答
tips
プレビュー
