belongsaToManyで取得したリレーション先のリレーションを取得

https://teratail.com/questions/50857?link=qa_related_pc
この記事を参考にして、中間テーブルのリレーションを取得したのですがさらにここからリレーション先のリレーションを取得するにはどうしたらいいのでしょう。
productsテーブルにcategory_idというカラムがありcategoriesテーブルとリレーションしているとします。参考記事の方法でproductsテーブルの情報を取得し、さらにそこからそのproductsテーブルのcategory_idに紐付いたcategoriesテーブルの情報を取得するにはどのようにすればいいのでしょうか。
■テーブル設計
【usersテーブル】
id | name | password | created_at | updated_at |

【favoritesテーブル】
user_id | product_id | created_at | updated_at |

【categoriesテーブル】
id | name | created_at | updated_at |

User.php

public function products()
    {
        return $this->hasMany('App\Producdt');
    }
public function favorites()
    {
        return $this->belongsToMany('App\Products', 'favorites');
    }

Product.php

public function category()
    {
        return $this->belongsTo('App\Category');
    }
public function favorites()
    {
        return $this->belongsToMany('App\Favorite', 'favorites');
    }
public function user()
    {
        return $this->belongsTo('App\User');
    }

Category.php

public function products()
    {
        return $this->hasMany('App\Product');
    }

Favorite.php

class Favorite extends Model
{
    //
}

web.php

    Route::get('/my/favorite', 'ProductsController@myFavorite')->name('my.favorite');

ProductsController.php

public function myFavorite()
    {
        $user = Auth::user();
        $favorites = $user->favorites;

        return view('products.favoriteProducts', [
            'favorites' => $favorites,
        ]);
    }

favoriteProducts.blade.php

<div id="app">
  <favorite-products :favorites="{{$favorites}}"></favorite-products>
</div>

FavoriteProducts.vue

<div v-for="product in favorites">
 {{ product.category_id }} // ここにproductsテーブルのcategory_idとリレーションしたcategoriesテーブルのnameカラムの値を表示したい
</div>

<script>
    export default {
        props: {
            favorites: Array,
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

phper.k

2020/09/29 01:44

imagesではなくimageテーブルなのですか？

chocomint20

2020/09/29 01:48

すみません、imagesでした

phper.k

2020/09/29 02:14

手元のソースコードを過不足なく提示してください。

chocomint20

2020/09/29 21:03

すみません、詳細コードを記載し訂正しました

phper.k

2020/09/30 00:10

Aidhia ってなんですか？

chocomint20

2020/09/30 01:50

すみませんミスです、訂正しました

phper.k

2020/09/30 01:59

products テーブルの user_id は、「データの作成者」の意味ですか？それとも、「製品の所有者」の意味ですか？

phper.k

2020/09/30 02:06

追加 {{ product.category_id }}　の部分で、category_id の値は表示されているのですか？

chocomint20

2020/09/30 04:08

productsテーブルのuser_idは製品の所有者です。 {{ product.category_id }}とすれば値は表示されます

行動規範の内容に同意します

回答1件

diff
1<div v-for="product in favorites">
2- {{ product.category_id }} // ここにproductsテーブルのcategory_idとリレーションした
3+ {{ product.category.name }} 
4</div>
5
6<script>
7    export default {
8        props: {
9            favorites: Array,
10        },
11        mounted() {
12            console.log('Component mounted.')
13        }
14    }
15</script>

これで取れると思う

投稿2020/09/30 04:29

phper.k

総合スコア3923

chocomint20

2020/09/30 13:14

遅くなり申し訳ありません、やってみたところエラーとなりだめでした。。。 Error in render: "TypeError: Cannot read property 'name' of undefined"となってしまいました。

chocomint20

2020/09/30 13:30

ProductsControllerで$user = Auth::user(); $favorites = $user->favorites; foreach($favorites as $favorite){ dd($favorite->category->name); } こうするとちゃんと値を取れるのでVue側に問題がありそうです。