ネット上の情報を収集してから、実装した上での心得を整理してみました。
背景
Bladeファイルでは、Laravel Controllerからのデータを受け取って使うことが可能ですが、Vue.jsファイルの中に同じことができるかどうかを知りたくて、調査してみました。
調査した結果だと現時点では同じことができなさそうですが、代案がありまして、これを実装すればControllerからViewに渡すデータをVue側で取れます。
jsの処理をBladeファイル内に実装すれば良いではないか？
そういうのも考えましたが、これも代案の一つ選択肢だと思います。
けど、やはりjs処理をBladeファイルに書きたくないので、別の案をしました。
対応方法
簡単な方法ですので、先に内容を書いておきます。
Bladeファイル内Controllerから渡してきたデータを受け取って、jsのGlobal変数に保存するとVue側で利用することが可能になります。
これからは対応の詳細を書きます。
1. 全体の構成
2. 本題に入る
全体の構成
Controllers
app/Controllers/xxxController.php
表示したいViewと渡したいデータを設定します。
...略
public function index() {
...略
return view('/yyy')->with('data', $data);
}
Views
- resources/views/yyy.blade.php
Viewの構成を管理します。
また、laravel-mixを使ってVue関連処理のjsファイルをrequireしますので、Vue関連処理のjsファイル（
resources/js/zzz.js）が必要となります。また、resources/js/zzz.jsにはresources/bootstrap.jsをrequireしています。
...略
<script src="{{ mix('js/zzz.js') }}"></script>
require('../bootstrap');
...略
laravel-mixを使うため、webpack.mix.jsも編集します。
mix
.js('resources/js/zzz.js', 'public/js')
.vue();
Routes
ルートを設定するため、routes/web.phpを編集します。
...略
Route::get('/xxx_index', [xxxController::class, 'index'])->name('xxx.index');
ここまでのまとめ
一つの画面を作成するには、追加＆修正が必要なファイルは下記となります。
- xxxController.php
- yyy.blade.php
- zzz.js
- webpack.min.js
- web.php
本題に入る
Vue側でControllerのデータを使う
対応方法にも書きましたが、まずはBladeファイル側でControllerのデータを受け取る。受け取ったデータをwindow.LaravelというGlobal変数に保存します。
同じ処理を各Bladeファイルに実装するのではなく、共通化できるようにしたいため、親Bladeファイル(base.blade.php)を作成し、その中に処理を実装し、各Bladeファイルがこの親Bladeファイルに継承するようにしました。
下記のように、<script>内にjsの処理を実装しました。
...略
<script>
window.Laravel = {!! json_encode(['data' => $data ?? null]) !!};
</script>
Vue側で利用する
let data = window.Laravel.data;
これでVue側で利用することができました！