如何在 livewire 组件中为 post 的 reviews/comments 部分进行分页
How to make pagination for reviews/comments section of a post in a livewire component
以下代码将显示每个 post 的评论,并允许用户进行评论
我想做的是在 reviews/comments 循环出组件
的地方分页
首先,这是我的 PostsController show 函数来获取 posts
public function show($id)
{
//defining out post object
$post = Post::find($id);
return view('posts.show')->with('post', $post);
}
接下来,这是我的 show.blade 带有 livewire 组件的文件
<!-- livewire posts component -->
<livewire:cafe-review-section :post="$post" />
接下来,这是我的组件 - 该组件显示 post 的所有 comments/reviews,以及 post 和 review/comment
的表格
<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>
接下来是我的直播class
<?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'));
}
}
以下代码将显示每个 post 的评论,并允许用户进行评论
我想做的是在 reviews/comments 循环出组件
的地方分页首先,这是我的 PostsController show 函数来获取 posts
public function show($id)
{
//defining out post object
$post = Post::find($id);
return view('posts.show')->with('post', $post);
}
接下来,这是我的 show.blade 带有 livewire 组件的文件
<!-- livewire posts component -->
<livewire:cafe-review-section :post="$post" />
接下来,这是我的组件 - 该组件显示 post 的所有 comments/reviews,以及 post 和 review/comment
的表格<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>
接下来是我的直播class
<?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'));
}
}