Good night all. I have a problem when I want to display many to many relationship data, namely postal data based on tags with livewire. Previously I tried in laravel can appear.
Now I want to display post data by tag with livewire but still can't.
the following is the code that I have made.
web.php
Route::get('tag/{tag:slug}',[FrontController::class, 'tag'])->name('tag');
FrontController.php
public function tag(Tag $tag)
{
$categories = Category::all();
$general = General::find(1);
$locale = App::currentLocale();
$search = request("search");
$posts = $tag->posts()->where([
['status','PUBLISH'],
['lang',$locale],
])->latest()->paginate(12);
if ($this->search !== null) {
$posts = $tag->posts()->where([
['title','like', '%' . $search . '%'],
['lang',$locale],
['status','PUBLISH'],
])->latest()->paginate(12);
}
// dd($posts);
$tags = Tag::all();
$top = Post::where('status','PUBLISH')->orderBy('views','desc')->limit(5)->get();
return view ('front.tag',compact('categories','general','locale','posts','tags','top'));
}
tag.blade.php
@extends('layouts.front')
@section('content')
<main id="main">
<section class="post-category">
<div class="container-fluid">
<div class="row mt-3">
<div class="col-lg-3 col-md-12 col-sm-12 d-none d-lg-block">
<div class="sticky-top" style="top: 90px;">
<div class="card mb-3 rounded-3">
<div class="card-body">
<a href="#" target="_blank" rel="noreferrer">
<img src="{{ asset('front/img/ads.png') }}" alt="..." height="300" width="279" class="card-img-top" />
</a>
</div>
</div>
<div class="d-flex flex-column mb-3 bg-light shadow bg-body rounded">
<div class="card-header bg-primary bg-gradient text-white fw-bold fs-5">
{{ __('sentence.category') }}
</div>
<ul class="list-group list-group-flush">
@foreach ($categories as $category)
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="{{ route('category', $category->slug) }}">{{ $category->name }}</a>
</li>
@endforeach
</ul>
</div>
<div class="d-flex flex-column bg-light bg-body shadow-lg rounded-3">
<div class="card-header bg-primary bg-gradient text-white fw-bold fs-5">
Tags
</div>
<div class="p-3 overflow-auto" style="max-height: 42vh">
<div class="nav tag-cloud">
@foreach ($tags as $tag)
<a href="{{ route('tag', $tag->slug) }}">{{ $tag->name }}</a>
@endforeach
</div>
</div>
</div>
</div>
</div>
<livewire:tag-index>
<div class="col-lg-3 col-md-12 col-sm-12">
<div class="sticky-top" style="top: 90px;">
<div class="card rounded-3 shadow-lg mb-3">
<div class="card-body">
<img src="{{ asset('front/img/ads1.png') }}" height="117" width="279" class="card-img-top" alt="...">
</div>
</div>
<div class="bg-light shadow bg-body rounded-3 mb-3">
<div class="card-header bg-primary bg-gradient text-white fw-bold fs-5">
{{ __('sentence.top_article') }}
</div>
<ul class="list-group list-group-flush mb-2">
@foreach ($top as $top)
<li class="list-group-item">
<a href="{{ route('blogShow', $top->slug) }}">{{ $top->title }}</a>
<div class="d-flex justify-content-between mt-3">
<small class="text-muted">{{ Carbon\Carbon::parse($top->created_at)->format("d F, Y") }}</small>
<small class="text-muted">{{ $top->views }} views </small>
</div>
</li>
@endforeach
</ul>
</div>
<div class="d-flex flex-column mb-3 bg-light shadow bg-body rounded d-lg-none d-xl-none">
<div class="card-header bg-primary bg-gradient text-white fw-bold fs-5">
{{ __('sentence.category') }}
</div>
<ul class="list-group list-group-flush">
@foreach ($categories as $category)
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="{{ route('category', $category->slug) }}">{{ $category->name }}</a>
</li>
@endforeach
</ul>
</div>
<div class="d-flex flex-column bg-light bg-body shadow-lg rounded-3 d-lg-none d-xl-none">
<div class="card-header bg-primary bg-gradient text-white fw-bold fs-5">
{{ __('sentence.tag') }}
</div>
<div class="p-3 overflow-auto" style="max-height: 42vh">
<div class="nav tag-cloud">
@foreach ($tags as $tag)
<a href="{{ route('tag', $tag->slug) }}">{{ $tag->name }}</a>
@endforeach
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
@endsection
@push('scripts')
@livewireScripts
<script type="text/javascript">
window.onscroll = function (ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
window.livewire.emit('tag-index');
}
};
</script>
<script>
document.getElementById('load-more').onclick = function() {
window.livewire.emit('tag-index');
};
</script>
@endpush
livewire\TagIndex.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\{Tag, Post};
use Illuminate\Support\Facades\App;
class TagIndex extends Component
{
public $limitPerPage = 10;
public $search;
protected $listeners = [
'tag-index' => 'TagIndex'
];
protected $updatesQueryString = [
['search' => ['except' => '']],
];
public function TagIndex()
{
$this->limitPerPage = $this->limitPerPage + 6;
}
public function render(Tag $tag)
{
$locale = App::currentLocale();
$posts = $tag->posts()->where([
['status','PUBLISH'],
['lang',$locale],
])->latest()->paginate($this->limitPerPage);
if ($this->search !== null) {
$posts = $tag->posts()->where([
['title','like', '%' . $this->search . '%'],
['status','PUBLISH'],
['lang',$locale],
])->latest()->paginate($this->limitPerPage);
}
$this->emit('postStore');
return view('livewire.tag-index', ['posts' => $posts]);
}
}
livewire\tag-index.blade.php
<div class="col-lg-6 col-md-12 col-sm-12">
<div id="section-title" class="section-title p-1 pt-3">
<h2 class="text-center fw-bold">{{ trans('sentence.recent_posts')}}</h2>
</div>
<div class="form-group has-search mb-3">
<span class="bi bi-search form-control-feedback"></span>
<input type="text" wire:model="search" class="form-control" placeholder="{{ __('sentence.search_form') }}">
</div>
@foreach ($posts as $data)
<div class="card bg-light shadow bg-body rounded-3 mb-2">
<div class="card-header bg-primary text-white d-flex justify-content-between">
<small>by {{$data->admin->name}}</small>
<small>{{ Carbon\Carbon::parse($data->created_at)->format("d F, Y") }}</small>
</div>
<div class="card-body">
<h2 class="card-title">
<a href="{{ route('blogShow', $data->slug) }}">{{ $data->title }}</a>
</h2>
<div class="card-footer bg-body d-flex justify-content-between align-items-center pb-0 px-0">
<div class="d-flex my-1">
@foreach ($data->tags as $tag)
<a href="{{ route('tag', $tag->slug) }}" class="badge {{ $tag->bg }} me-1 shadow-sm text-white">{{ $tag->name }}</a>
@endforeach
</div>
</div>
</div>
</div>
@endforeach
@if ($posts->count() == 0)
<div class="alert alert-danger" role="alert">
Data not found!
</div>
@endif
@if($posts->count() >= 10)
<div class="text-center d-md-none d-lg-none d-xl-none">
<button id="load-more" class="btn btn-primary my-3">
Load More
</button>
</div>
@endif
</div>
what is the correct way or code to display many to many relationship data with livewire? in this case, I want to display post data by tag. thank you
My Answer:
FrontController.php
php
public function tag(Tag $tag)
{
$posts = $tag->posts;
return view('tag', compact('posts'));
}
tag.blade.php
php
@foreach($posts as $post)
{{ $post->title }}
{{ $post->content }}
@endforeach
livewire/TagComponent.php
php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Tag;
class TagComponent extends Component
{
public $tag;
public function mount(Tag $tag)
{
$this->tag = $tag;
}
public function render()
{
$posts = $this->tag->posts;
return view('livewire.tag-component', compact('posts'));
}
}
livewire/tag-component.blade.php
php
@foreach($posts as $post)
{{ $post->title }}
{{ $post->content }}
@endforeach
tag.blade.php
php
Make sure you have set up Livewire correctly in your Laravel project and that you have the necessary Livewire components and views set up.
Rate this post
5 of 5 based on 6148 votesComments