【发布时间】：2021-11-01 05:06:39
【问题描述】：
为什么这个来自 livewire 的分页存在这么多问题？我已经看到了很多这样的话题..而且我不明白..我做错了什么？ https://i.imgur.com/PENGFjf.gifv
如果我手动操作并在 url 地址中写入“？page=2”，它正在工作，但我没有任何操作，点击分页按钮
| "laravel/framework": "^8.54",
| "laravel/jetstream": "^2.3",
| "laravel/sanctum": "^2.6",
| "laravel/tinker": "^2.5",
| "livewire/livewire": "^2.5"
<?php
namespace App\Http\Livewire;
use App\Models\Product;
use Livewire\Component;
use Livewire\WithPagination;
class ShopComponent extends Component
{
use WithPagination;
public function render()
{
return view('livewire.shop-component', ['products' => Product::paginate(9)])->layout('layouts.base');
}
public function paginationView()
{
return 'livewire.custom-pagination';
}
}
自定义分页是从供应商复制的 - 引导分页
<div>
@if ($paginator->hasPages())
<nav class="pagination justify-content-center">
<ul class="pagination mt-30 mb-30">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
<span class="page-link" aria-hidden="true">‹</span>
</li>
@else
<li class="page-item">
<button type="button" dusk="previousPage" class="page-link" wire:click="previousPage" wire:loading.attr="disabled" rel="prev" aria-label="@lang('pagination.previous')">‹</button>
</li>
@endif
{{-- Pagination Elements --}}
@foreach ($elements as $element)
{{-- "Three Dots" Separator --}}
@if (is_string($element))
<li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
@endif
{{-- Array Of Links --}}
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<li class="page-item active" wire:key="paginator-page-{{ $page }}" aria-current="page"><span class="page-link">{{ $page }}</span></li>
@else
<li class="page-item" wire:key="paginator-page-{{ $page }}"><button type="button" class="page-link" wire:click="gotoPage({{ $page }})">{{ $page }}</button></li>
@endif
@endforeach
@endif
@endforeach
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<li class="page-item">
<button type="button" dusk="nextPage" class="page-link" wire:click="nextPage" wire:loading.attr="disabled" rel="next" aria-label="@lang('pagination.next')">›</button>
</li>
@else
<li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
<span class="page-link" aria-hidden="true">›</span>
</li>
@endif
</ul>
</nav>
@endif
</div>
商店组件 https://i.imgur.com/bob483q.png
<div>
@foreach ($products as $product)
<div class="col-sm-6 col-lg-4 mb-30">
<div class="card product-card">
<div class="card-body">
<div class="product-thumbnail position-relative">
<span class="badge badge-danger top-right">New</span>
<a href="single-product.html">
<img class="first-img" src="{{ asset('assets/img/product/1.png') }}" alt="thumbnail" />
</a>
<!-- product links -->
<ul class="actions d-flex justify-content-center">
<li>
<a class="action" href="wishlist.html">
<span data-toggle="tooltip" data-placement="bottom" title="add to wishlist" class="icon-heart">
</span>
</a>
</li>
<li>
<a class="action" href="#" data-toggle="modal" data-target="#compare">
<span data-toggle="tooltip" data-placement="bottom" title="Add to compare" class="icon-shuffle"></span>
</a>
</li>
<li>
<a class="action" href="#" data-toggle="modal" data-target="#quick-view" >
<span data-toggle="tooltip" data-placement="bottom" title="Quick view" class="icon-magnifier"></span>
</a>
</li>
</ul>
</div>
<div class="product-desc py-0 px-0">
<h3 class="title">
<a href="shop-grid-4-column.html">{{ $product->name }}</a>
</h3>
<div class="star-rating">
<span class="ion-ios-star"></span>
<span class="ion-ios-star"></span>
<span class="ion-ios-star"></span>
<span class="ion-ios-star"></span>
<span class="ion-ios-star de-selected"></span>
</div>
<div class="d-flex align-items-center justify-content-between" >
<span class="product-price">{{ $product->regular_price }}</span>
<button class="pro-btn" data-toggle="modal" data-target="#add-to-cart" >
<i class="icon-basket"></i>
</button>
</div>
</div>
</div>
</div>
</div>
@endforeach
{{-- Paginacja produktów --}}
{{ $products->links() }}
</div>
【问题讨论】：
-
1) 通常最好将
for loop包装在一个 div 中。 2）您的产品div'是否使用密钥（例如）wire:key="product_{{ $product->id }}"laravel-livewire.com/docs/2.x/troubleshooting -
我不使用任何 $loop
-
我的意思不是
foreach，顺便说一句，$loop两者都可用。这是一个magic variable 但你不需要使用它。事实上，我不会为此推荐它，因为您的产品顺序可能会改变。wire:key相当于一个唯一标识符，可帮助 Livewire 在 HTML 内容更改时跟踪更改。请尝试一下，看看是否有帮助 -
你到底是什么意思？因为我还在学习。看看这个i.imgur.com/ol9WZ1t.png
标签： laravel laravel-livewire jetstream