どうも。
初心者サーバーサイドプログラマーのまいけるです。
最近、業務でサーバーはlaravel、フロントはvueといったアプリを制作した際に自分がちょっとつまづいた点を備忘録的に書いていきたいと思います。
①オブジェクトで値が渡らない！！！！！
<foo-component
foo-object="{{ json($foo_object }}"
></foo-component>
最初は、こんな感じでcomponent側に値を渡していたのですが...
v-forで回せない！！！！！！！
なぜ...
ということでchromeのvue拡張機能でfoo-objectの中身を見てみると。
Stringで渡ってるやん!!!
どうやらv-bindしないとオブジェクトに渡らないそうです。
ということで最終的には
<foo-component
:foo-object="{{ json($foo_object }}"
></foo-component>
こんな感じに収まりました。
②sessionとrouteをうまく渡せない！！！！
v-bindで渡せば良い、ということを知った自分は、名前付きのrouteやsessionなども以下のような感じで書くことにしました。
<foo-component
:route="{{ route('app.index') }}"
:session="{{ session('foo') }}"
></foo-component>
すると・・・。
エラー出ちゃってるけど。
routeやsessionについては、以下みたいに書かなきゃいけないみたいです。
③intで渡らない!!!!!
<foo-component
id="{{ session('id') }}"
></foo-component>
さて、sessionはv-bindせず（？）に渡さなきゃいけないということで上記のようにコードを書いたのですが今度は全然intで渡らなくなってしまいました。
なぜだ...となっていたのですが、objectを渡していた時のことを思い出して拡張機能でidの中身を見てみると
Stringでした。
ということで以下みたいにv-bindで渡すことでintはintのまま、objectはobjectのまま渡せるみたいですね。
ちなみに、sessionでオブジェクトとか配列を渡す時は、
<foo-component
foo-object="{{ json_encode(session('foo_object') ?? '') }}"
></foo-component>
みたいに書けばいいそうです。
※②番目もjson_encodeすれば多分v-bindで書けると思うのですが、routeについてはstringで渡せば問題ないので②番目の書き方を採用しました。
他にもちょこちょことつまづいたのですが今回はblade中心ということで。
まあ、ちゃんとドキュメントを読みましょう、という感じですね。