emahiro/b.log

日々の勉強の記録とか育児の記録とか。

トップ > Vue > Vueのテンプレート構文のエンコードでハマる

Vueのテンプレート構文のエンコードでハマる

Vue 
<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="utf-8"/>
</head>
<body>
<div id="app">
    <p>This is sample Vue app</p>
    <p>count: {{ count }}</p>
</div>
<script src="https://unpkg.com/vue"></script>
</body>
<script>
    new Vue({
        // describe options
        el: '#app',
        data: {
            count:0,
        },
        methods: {
            countUp: function () {
                this.count++
                console.log("count up")
            }
        }
    })
</script>
</html>

Mustache構文を使った時にブラウザで以下のようなエラーにぶち当たりました。

プレーンテキストドキュメントの文字エンコーディングが宣言されていません。ドキュメントに US ASCII 外の文字が含まれている場合、ブラウザーの設定によっては文字化けすることがあります。ファイルの文字エンコーディングは転送プロトコルで宣言されるか、文字エンコーディングを指定するバイトオーダーマークがファイルに使われている必要があります。

encoding文字しているのに指定しているのにブラウザ側で怒られました。(firefox ver60を使用)
XSS対策関連で怒られてるっぽいのでとりあえず、vue内で使うpropertyを指定できればいいので v-html を使って回避しました。

<p>count: <span v-html="count"></span></p>

テンプレート構文 — Vue.js

あたりを参考にするといいっぽい。vue始めたばかりでよくわかってないけど。