ホーム > Laravel > Laravelで一覧に「ハッシュタグ」を表示する方法
Laravel

Laravelで一覧に「ハッシュタグ」を表示する方法

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

Laravel で一覧に「ハッシュタグ」を表示する方法についてまとめました

Laravel 8
Vue 2

記事を公開した際、上記の環境で作りましたが、現在 Larave 11、Vue 3 でも問題なく動作します。

前提

  1. posts テーブル
  2. post_tag テーブル
  3. tags テーブル

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

多対多で保存する機能は以下の記事を参照してください。

Laravel で多対多のリレーションをして保存、表示する方法【belongsToMany】

Laravel でリレーションを書く

Post モデルにリレーションを書きます。

Models/Post.php

    public function tags()
    {
        return $this->belongsToMany(Tag::class);
    }

コントローラーで、タグをセットで一覧を取得する

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

この記述により、tags のリレーションがが加わった状態でデータが取得されます。

blade で一覧を表示する方法

Laravel の.blade.phpファイルで表示する方法です。

以下のようにタグを表示できます。

注意点は、tags が複数なのでさらに foreach で回すことになります。

@foreach($posts as $post)
  {{ $post->title }}
  @foreach($post->tags as $tag)
    {{ $tag->name }}
  @endforeach
@endforeach

Vue で一覧を表示する方法

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

<template>
  <div v-for="post in posts">
    <p v-for="tag in post.tags" :key="`tag${post.id}-${tag.id}`">
      {{tag.name}}
    </p>
  </div>
</template>

以上です。

誰かの参考になれば幸いです。

フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。