あらすじ
- blade と vue.js で記法が競合していて困った（困っている）
- 一応解決策はある
- もっとうまくどうにかしたい
という話です。
mustache 競合問題
blade と vue.js ではどっちもデフォルトで {{ 変数 }} で変数を出力するようになっています。
そのため、blade 内で vue.js のテンプレートとして mustache を使いたい場合は@{{ 変数 }} という書き方をすることになります。
それはそれでいいんですが、サーバから渡された変数 $foo = '{{ bar }}' を blade 内で出力する時、同ページ内で vue.js を使っている場合は、以下のようなことが起きることが有ります。
sample.blade.php
<p>{{ $foo }}</p> -> {{ bar }} と表示されてほしい
↓ 変数が展開される
<p>{{ bar }}</p>
↓ vue.js が勘違いする
<p></p> -> 該当する変数が vue.js のコンポーネントに存在せず、何も表示されない！
困りました。
対策1
vue.js ではこのテンプレートを変更できるようになっていて、例えば {% 変数 %} という風にもできます。これによって上記の問題をとりあえず避けることはできるんですが、根本的な解決にはなっていません。変数に変更後の記法が含まれていたら同じことが発生してしまいます。
対策2
ということで、今回は php (laravel) 内で echo のラッパー関数を作って、blade 内で {{ $foo }} と書いた時に、変数内の { } を全角に変換して vue.js が手を出さないようにするという方法を取りました。
……んですが、{{ $foo }} という書き方が出来ない場面が多々有り、そういう時は適宜 my_echo($foo) みたいなことをしなければならず……。
解決案
お待ちしています。