by ryou

LaravelのBladeテンプレートの中括弧やアットマークをエスケープする方法

結論

@マークを付ければいい

例えば

this {{is}} test.

という出力をしたい場合は、Bladeテンプレート内で

this @{{is}} test.

とする。

詳細

SPAフレームーワークに興味があり、Vue.jsをLaravelと組み合わせて使い始めたのですが、両フレームワーク共に式評価値をテキストとして出力したい際に

{{ variable }}

というように中括弧で囲む必要がある。

そのため、Vue.jsのために中括弧を使いたい場合もBladeテンプレートとバッティングしてしまい、想定通りの動作にならないことで少し詰まった。

どうすればいいかというと、Bladeテンプレート内にVue.jsのテンプレートを書く際は、@マークを使用すればいい。

例えば次のようなVue.jsテンプレートが欲しい場合

<button @click="pushBtn">{{ text }}</button>

これをBladeテンプレート内に書く場合は以下のようにする必要がある。

<button @@click="pushBtn">@{{ text }}</button>