Laravel
Laravelで一覧に「ハッシュタグ」を表示する方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
PR
Laravel で一覧に「ハッシュタグ」を表示する方法についてまとめました
Laravel 8
Vue 2
記事を公開した際、上記の環境で作りましたが、現在 Larave 11、Vue 3 でも問題なく動作します。
前提
- posts テーブル
- post_tag テーブル
- 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の適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。