Laravel Blade で Vue.js のデータバインディング {{ … }} がエラーになるときの対処方法

PHPフレームワーク Laravel と Vue.js との小ネタです。

Vue のテンプレートは Laravel の Blade テンプレート中に直接書くことができます（以下はエラー注意）。

<div id="app">
    <p>{{ message }}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        }
    });
</script>

<p>{{ message }}</p>

</div>

new Vue({

el: '#app',

data: {

message: 'Hello Vue.js!'

}

});

</script>

しかし PHP 側で　Use of undefined constant message – assumed ‘message’ (this will throw an Error in a future version of PHP) というエラーになってしまい、ページが表示されなくなります。

Blade と Vue の波括弧 {{ … }} 構文がバッティングするためで、これを解消するには以下のように {{ … }} の前に @ をつけます。たったこれだけで解消されます。

<div id="app">
    <p>@{{ message }}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        }
    });
</script>

<p>@{{ message }}</p>

</div>

new Vue({

el: '#app',

data: {

message: 'Hello Vue.js!'

}

});

</script>

@{{ … }} については Laravel の日本語ドキュメントにも書かれていますので、チェックしてみましょう。

多くのJavaScriptフレームワークでも、与えられた式をブラウザに表示するために波括弧を使っていますので、@シンボルでBladeレンダリングエンジンに波括弧の展開をしないように指示することが可能です。

Laravel 5.7 Bladeテンプレートより引用

補足

Vue.js のテンプレートを Blade テンプレートの中に直接書くことはできますが、Laravel と Vue.js の連携アプリケーションでは「単一ファイルコンポーネント」として独立管理するのが一般的かと思います。

補足

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル