#laravel #laravel-livewire #jetstream
Вопрос:
Почему так много проблем с этой пагинацией из livewire? я видел много тем об этом.. и, срсли я не понимаю.. что я делаю не так? https://i.imgur.com/PENGFjf.gifv <- problem
если я перейду вручную и напишу «?страница=2» в URL-адресе, это сработает, но у меня нет никаких действий внутри, щелкая по кнопкам разбиения на страницы
| "laravel/framework": "^8.54",
| "laravel/jetstream": "^2.3",
| "laravel/sanctum": "^2.6",
| "laravel/tinker": "^2.5",
| "livewire/livewire": "^2.5"
<?php
namespace AppHttpLivewire;
use AppModelsProduct;
use LivewireComponent;
use LivewireWithPagination;
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">amp;lsaquo;</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')">amp;lsaquo;</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')">amp;rsaquo;</button>
</li>
@else
<li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
<span class="page-link" aria-hidden="true">amp;rsaquo;</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.1) В целом предпочтительнее завернуть
for loopв div. 2) Использует ли ваша продукцияdivключ (например)wire:key="product_{{ $product->id }}"laravel-livewire.com/docs/2.x/troubleshooting2. Я не использую никакой цикл $
3. Я имею
foreachв виду , что, кстати,$loopон доступен и в том, и в другом. Это волшебная переменная , но вам не нужно ее использовать. На самом деле, я бы не рекомендовал его для этого, так как порядок ваших продуктов может измениться. Этоwire:keyэквивалент уникального идентификатора, который помогает Livewire отслеживать изменения при изменении содержимого HTML. Пожалуйста, попробуйте и посмотрите, поможет ли это4. Что вы конкретно имеете в виду? Потому что я все еще учусь. Посмотри на это i.imgur.com/ol9WZ1t.png
Ответ №1:
php artisan livewire:publish --config
php artisan livewire:publish --assets
во-вторых , обязательно добавьте эти строки в основной шаблон.
<head>
@livewireStyles
</head>
<body>
{{ $slot }}
@livewireScripts
</body>