Vue コンポーネントにモデル (Entity) を渡す

Laravel で Blade テンプレート上に記述した Vue コンポーネントに Laravel の Model を渡す場合。

{{ hoge }}を使うと渡した値は e() によりHTMLエスケープされるが、Vue コンポーネントのディレクティブとしてエスケープされたJSONを渡した場合もちゃんとオブジェクトとしてパースされpropsに入ってくれる。
(そもそもHTMLで属性に e() した値を渡してもエスケープ前の文字列として扱われるから当然といえば当然)

Example

Router / Controller

View template

JS

Vue: ViewModel

これでビルドすると、いい感じに表示される。

Result

Appends

JSONなら基本的になんでも渡せるので Collection 等についても同様に渡せる。
(素の配列はそのままでは __toString 出来ないので一旦 collect()すると楽)

追加フェッチを含むコンテンツ (Ex: 無限スクロール) のプリフェッチとしても使えそう。

参考: Pass model to component using properties?

コメントを残す