laravel から vue.js で値の受け渡しをしたい

Question

vueコンポーネントに初期の値を設定し、それをvueで利用するにはどうすればいいでしょうか？

例えば以下のような形です。

laravelのバックエンドから受け取った配列をbladeのforeachで値を設定することを想定しています。
個人的に考えたのカスタムプロパティで書き出してそれをvueで受け取ればいいのかとか考えたのですが、どうすれば受け取れるのか分かりません…

@foreach($users as $user)
<example-vue :user_id='{{$user['id']}}'></example-vue>
@endforeach

Vue.component('example-vue',{
  data:<-ここで受け取る？
  },
  template: ''
})

v-bind？でやるのが正しいやり方なのかもわからないので他にもいい手段があれば教えていただきたいです。

最終的にはこの<example-vue>のところに受け取った$user['id']にwith紐付けた$user_informationをもとに色々計算したものを表示しようと思っています。

よろしくお願いします。

Answer 1

laravelのバックエンドから受け取った配列をbladeのforeachで値を設定することを想定しています。

ごめんなさい、この前提がそもそもやらないほうがいいと思います。
laravelはバックエンドに集中し、vue側はajax通信を通して値を取得する方がいいです。
そもそも論を言うと、vueやreactなどは仮想DOMを使いHTMLを差分更新する事が最大のメリットとなるフレームワークです。
フルリロードをしなくてすむので画面遷移が早くなる（つまりUXが向上する）

それをバックエンドフレームワークのHTML出力で介入するとなると保守性も落ちるし、将来の切り離しも困難になります。

おまけに画面遷移はどうするおつもりですか？毎度フルリロード？
色々とトリッキーな事をしないといけなくなると予想されます。

バックエンドとフロントエンドでせっかくフレームワークを別々に導入しているならその双方のメリットを最大限に生かさないと使っている意味がなくなります。

なので、laravelにAPIを実装して、vue側ではajax通信をしてデータを取得するようにしてみてください。
（ライブラリはaxiosがおすすめです）

Comments

[ETO3]

ご指摘ありがとうございます。
そもそもバックエンドとフロントは切り離した方がいいという話なんですね…
laravelのAPI化も勉強していこうと思います。

今回に関しては本来laravel だけでもできる内容なんですが、僕が最近vueを勉強し初めまして徐々に慣れていきたいというのもあって多少無理やりでもvueで書いてみようと思った次第です。（練習プロジェクトです）
今までlaravelしか触ってこなかったもので…
なのでおかしなやり方というのを承知でお聞きしたいのですが、bladeから値を受け取る方法ってあるのでしょうか？

[deo_deo]

なるほど。
<example-vue>にカスタムプロパティを指定するのは特におかしなやり方ではないです。
で、<example-vue>側がどう受け取ればいいかというと、propsというものが存在します。
これは親のコンポーネントから子のコンポーネントへ値を渡したい時に利用します。
注意点としてはカスタムプロパティの値は子コンポーネントで変更してはいけません。
データの流れは常に親から子へデータを流し（props等）、変更したい場合は子から親へ流します。（emit等）

[deo_deo]

蛇足ですが、フロントエンドの考え方にAtomicDesignというデザインパターンがあります。
vueに慣れて来た頃に勉強すると、より実践向きになると思いますので覚えておいて損は無いと思います！

[ETO3]

propsで値が受け取れるようになりました。ありがとうございます！
AtomicDesign、高度なことやろうとするとそういうのも必要になってくるんですね
フロントもvue.jsもまだまだですが一つ一つものにしていこうと思います