如何解决如何在 livewire 组件中为帖子的评论/评论部分进行分页
以下代码将显示每个帖子的评论,并允许用户进行评论
我想要做的是分页评论/评论在组件中的循环部分
首先,这是我的 PostsController 显示函数来获取帖子
public function show($id)
{
//defining out post object
$post = Post::find($id);
return view('posts.show')->with('post',$post);
}
接下来,这是我的带有 livewire 组件的 show.blade 文件
<!-- livewire posts component -->
<livewire:cafe-review-section :post="$post" />
接下来,这是我的组件 - 该组件显示帖子的所有评论/评论,以及发布评论/评论的表单
<div>
<!-- show comment form -->
<form wire:submit.prevent="postReview" action=" " method="post">
@csrf
<textarea wire:model.defer="cafeReview" required name="cafeReview" id="" cols="30" rows="4"
placeholder="Type review here"
></textarea>
@error('comment')
<p>{{ $message }}</p>
@enderror
<button type="submit" class="btn btn-primary">
<div wire:loading wire:target="postReview" class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<span>post comment</span>
</button>
</form>
<!-- here is where we will display a list of comments for the post-->
@if(count($post->cafeReviews) > 0)
@foreach($post->cafeReviews->sortDesc() as $comm)
<div class="d-flex bd-highlight" style="background-color: #FAF0E6; margin-bottom: 1%; border-radius: 20px; padding-top: 1%; padding-bottom: 2%;">
<div class="p-2 flex-shrink-1 bd-highlight">
<img style="width: 60px; height: 60px; vertical-align: middle" src="/css/img/user.png" alt="avatar">
</div>
<div class="p-2 w-100 bd-highlight">
<div class="flex items-center">
<div>Posted by: <b>{{ $comm->username }}</b></div>
<hr>
<div class="text-gray-700 mt-2">{{ $comm->content }}</div>
</div>
<div class="d-flex" style="margin-top: 3%; padding-right: 1%;">
<div class="ms-auto">
{{ $comm->created_at->diffForHumans() }}
</div>
</div>
</div>
</div>
@endforeach
@else
<p>no reviews</p>
@endif
</div>
接下来,这是我的直播课
<?php
namespace App\Http\Livewire;
use App\Models\CafeReview;
use App\Models\Post;
use Livewire\Component;
use RealRashid\SweetAlert\Facades\Alert;
class CafeReviewSection extends Component
{
public $post;
//keeping track of review with sate
public $cafeReview;
//defining our validation rules
protected $rules = ([
'cafeReview' => 'required|min:4'
]);
//we dont actually need this as livewire knows already
public function mount(Post $post)
{
$this->post = $post;
}
public function postReview()
{
//validating our comment state when we submit
sleep(1);
$this->validate();
CafeReview::create([
'post_id' => $this->post->id,'user_id' => auth()->user()->id,'username' => auth()->user()->username,'content' => $this->cafeReview,]);
$this->post->refresh();
$this->cafeReview = '';
}
public function render()
{
return view('livewire.cafe-review-section');
}
}
解决方法
如果您按照 livewire 文档进行分页,应该很容易将其添加到您的视图中。
<!-- here is where we will display a list of comments for the post-->
@forelse ($reviews as $review)
<div class="d-flex bd-highlight" style="background-color: #FAF0E6; margin-bottom: 1%; border-radius: 20px; padding-top: 1%; padding-bottom: 2%;">
<div class="p-2 flex-shrink-1 bd-highlight">
<img style="width: 60px; height: 60px; vertical-align: middle" src="/css/img/user.png" alt="avatar">
</div>
<div class="p-2 w-100 bd-highlight">
<div class="flex items-center">
<div>Posted by: <b>{{ $comm->username }}</b></div>
<hr>
<div class="text-gray-700 mt-2">{{ $comm->content }}</div>
</div>
<div class="d-flex" style="margin-top: 3%; padding-right: 1%;">
<div class="ms-auto">
{{ $comm->created_at->diffForHumans() }}
</div>
</div>
</div>
</div>
@empty
<p>no reviews</p>
@endforelse
<!-- pagination links -->
{!! $reviews->links() !!}
<?php
namespace App\Http\Livewire;
use App\Models\CafeReview;
use App\Models\Post;
use Livewire\Component;
// WithPagination Trait
use Livewire\WithPagination;
use RealRashid\SweetAlert\Facades\Alert;
class CafeReviewSection extends Component
{
// withPagination Trait
use WithPagination;
public $post;
//keeping track of review with sate
public $cafeReview;
//defining our validation rules
protected $rules = ([
'cafeReview' => 'required|min:4'
]);
//we dont actually need this as livewire knows already
public function mount(Post $post)
{
$this->post = $post;
}
public function postReview()
{
//validating our comment state when we submit
sleep(1);
$this->validate();
// create review through post->cafeReviews relationship
$this->post->cafeReviews()->create([
'user_id' => auth()->user()->id,'username' => auth()->user()->username,'content' => $this->cafeReview,]);
// Reset pagination after creating new review
$this->resetPage();
$this->cafeReview = '';
}
public function render()
{
// Append paginated reviews to view
$reviews = $this->post->cafeReviews()->latest()->paginate(10);
return view('livewire.cafe-review-section',compact('reviews'));
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。