Laravel Framework 8.83.8
Vue 2.6

前提

1. posts テーブル
2. likes テーブル

がある前提で表示に特化した内容になります。

「いいね」する機能は以下の記事を参照してください。

Laravel で「いいね」機能を実装する方法

Laravel でリレーションを書く

Post モデルから見ると Like は、１対多なので hasMany でリレーションを書きます。

Models/Post.php

    public function likes()
    {
        return $this->hasMany('App\Models\Like');
    }

コントローラーで、いいね数をセットで一覧を取得する

Laravel でリレーション先の数の合計を数えて一覧に表示する方法【withCount】

（ルーティングの設定や blade ファイルの生成は記事では省略します）

    public function index()
    {
        $posts = Post::withCount('likes')->get();
        //dd($posts);
        return view('post/index',compact('posts'));
    }

この記述により、カラムに「likes_count」が加わった状態でデータが取得されます。

blade×Laravel で一覧を表示する方法

カラムが追加されているので、他のカラムと同様に取得することが可能です。

@foreach($posts as $post)
<div>{{ $post->likes_count }}</div>
@endforeach

Vue ×Laravel で一覧を表示する方法

リレーションやコントローラーは同様で、カラムが追加されているだけですので、シンプルに以下のように取得が可能です。

<template>
  <div v-for="post in posts">{{post.likes_count}}</div>
</template>

まとめ

以上です。

誰かの参考になればと思います。

感想・苦情は TwitterDM にご連絡ください。

それでは！

人気記事

PHP7.4 ＋ Laravel6 のプロジェクトを AWS EC2 にデプロイする

【laravel-breadcrumbs】Laravel でパンくずリストを実装する