Q&A
> ちゃんとした動作をしない
について具体的に書かれた方が良いかなと思います。（ `{{ message }}` と表示されるということでしょうか）
前提・実現したいこと
vue.js初心者です。
現在Webアプリケーションを作成しており、フロントをvue.jsで書こうと思っています。
想定している動作は、<p>{{ message }}</p>に"Vue.js"の文字列が表示されるものです。
発生している問題・エラーメッセージ
試しに書いてみたコードがちゃんとした動作をしないので困っています。
ちゃんとした動作とは、ブラウザのソース画面で<p>{{ message }}</p>が<p>Vue.js</p>に代わり、ブラウザ画面でVue.jsの文字列が表示されるものです。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script> 7 <title>ログイン</title> 8</head> 9 10<body> 11 <div id="app"> 12 <p>{{ message }}</p> 13 <form action="******" method="POST"> 14 <input type="text" name="userid" id="userid"> 15 <input type="password" name="userpass" id="userpass"> 16 <input type="submit"> 17 </form> 18 </div> 19 20 <script src="{{ url_for('static',filename='js/login.js')}}"></script> 21</body> 22 23</html>
javascript
1var app = new Vue({ 2 el: "#app", 3 data:{ 4 message: "Vue.js" 5 } 6})
試したこと
ローカルでほぼ同じコードを書いて実行してみると想定通り動作しました。
chromeのconsole画面でapp.message = "hoge"とするとmessageは変わりました。
なぜ表示されないのでしょうか？
よろしくお願いします。
回答3件
0
なぜ表示されないのかわかりませんが試しにbodyの中身を
html
1<body> 2 <div id="app"> 3 <p>{{ message }}</p> 4 </div> 5</body>
だけにしてもダメでしょうか。他が悪さをしてる可能性。
投稿2020/04/06 02:38
総合スコア88
0
ブラウザのキャッシュをクリアすると問題が解消しないでしょうか。
もしそうでしたら、以下のような対策を考えた方が良いかもしれません。
https://qiita.com/kujirahand/items/896ea20b28ee2ed96311
投稿2020/04/05 05:11
総合スコア1899
あなたの回答
tips
プレビュー
