Laravelからvue.jsにpropsで渡した、リレーションされたデータをVuetifyのv-data-tableで表示するにはどうしたら良いか。
解決したいこと
laravelからvue.jsにpropsで渡した、リレーションされたデータをVuetifyのv-data-tableで表示するにはどうしたら良いでしょうか。
ソースコード
使用テーブル
usersテーブル
{id: 1, name: "jon", age: 23},
{id: 2, name: "tom", age: 20}
hobbyテーブル
{hobby_id: 1, user_id: 1, play: surf},
{hobby_id: 1, user_id: 1, play: cafe}
idとuser_idは紐づけされている。
$table->foreign('user_id')->references('id')->on('users');
Userモデル
public function User(){
return $this->hasOne('App\hobby', 'user_id');
}
Userコントローラー
class userController extends Controller
{
public function list()
{
$UserData = User::with(['hobby'])->get()->toArray();
//dd($UserData);
return view('list', compact("UserData"));
}
}
list.blade.php
<div id="app">
<userList-component :user-data="{{json_encode($UserData)}}">
</userList-component>
</div>
userList.vue
<template>
<v-app>
<v-data-table
:headers="userListHeaders"
:items="dataList"
class="elevation-1 ma-2"
:loading="loading"
:search="search"
loading-text="読み込み中..."
>
</v-data-table>
</v-app>
</template>
<script>
export default {
props: {
UserData: {
required: true,
},
},
data:() => ({
date: null,
menu: false,
search: "",
loading: true,
dialog: false,
userListHeaders:[
{ text: "ユーザid", value: "id" },//usersテーブル
{ text: "名前", value: "name" }, //usersテーブル
{ text: "趣味", value: "play" }, //hobbyテーブル
//中身を記述出来る。
dataList: [
this.User.forEach((val, i) => {
{
id : val[i].employee_id,
name : val[i].name,
play : val[i].hire_date,
}
})
],
}
),
created() {
console.log(this.UserData);
},
ここでconsole.log(this.UserData);の出力結果は以下になります。
[
{id: 1, name: "jon", age: 23,
hobby:{hobby_id: 1, user_id: 1, play: surf}},
{id: 2, name: "tom", age: 20,
hobby: {hobby_id: 1, user_id: 1, play: cafe}}
]
自分で試したこと
created()内で、UserDataの中身が確認出来たので、v-data-tableの方にも記述できると思って、map関数でUserDataを回そうとしたのですがそもそもUserDataが見つかりませんでした。
dataList: [
this.User.forEach((val, i) => {
{
id : val[i].employee_id,
name : val[i].name,
play : val[i].hire_date,
}
})
],
参考記事
0