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

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

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

 

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

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

 

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

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

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

補足

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です