PHP Laravel bladeとvuejsと。

いよいよ花粉症の季節がやってきますね。
> 花粉さん、今年は注射治療しますがお手柔らかにお願いしますね。
マエダです。

さてこのタイトルなんなのかとご説明させていただきますと、みんな大好きLaravelのBladeテンプレートにControllerから渡された変数を利用して、vuejsの変数名を生成して、vuejsの変数を表示したい！

僕の日本語がヘンくてわかりませんね。(変)

Bladeテンプレートの変数の表示

こちら利用したことある方はおなじみの記述方法ですね。

<span>
{{ $name }}
</span>

Vue.jsの変数の表示(Blade内)

Laravel利用者はおなじみだと思いますが、BladeとVue.jsの波括弧とで構文エラーとなるのを先頭に「@」を付けることで回避する記述方法を利用します。

<span>
@{{ name }}
</span>

Vue.jsの変数をPHP変数で変更して表示

上記を踏まえまして、これってどうかなーってBladeテンプレートに書くと・・・

<span>
@{{ users.{{ $user_id }}.name }}
</span>

「[Vue warn]: Error compiling template」

波括弧の閉じるがどっちやねん！って怒られてしまいますね。。。

そこでの回避方法として、

<span>
@php echo("{{ users.{$user_id}.name }}") @endphp
</span>

急に波括弧を使わない！という選択。( ｰ`дｰ´)ｷﾘｯ

そもそもそんなPHPとJavaScriptどっちつかずの設計にするなよとかのツッコミは受け付けません。
こうやったらどうですか？という優しいツッコミだけお願いします。

以上、vuejsに触れてみようのコーナーでした。

＼＼優しくツッコミをいれてくれる仲間を募集中です！！／／
vuejsビギナーの僕がよくわからない利用方法を実験しているときに優しくツッコミいれてくれるそこのあなた。
以下ページよりご応募お待ちしております。
https://splout.co.jp/recruit/

Tweet