Livewire 3分页点击后页面不更新,控制台报currentNode is null错误
Livewire 3分页器失效问题
我已将项目的Livewire版本从2升级到3,且严格遵循完整的升级指南操作。但测试页面分页器时发现功能失效,具体表现如下:
- 页面包含3个分页器,已为它们设置唯一名称;点击分页器的“下一页”按钮时,URL参数会正常变化,页面也会像新版本要求的那样滚动到顶部,但不会显示下一页内容,分页按钮也不会更新到对应位置;
- 手动修改URL参数时功能完全正常;
- 浏览器控制台出现错误:
Uncaught TypeError: currentNode is null; - 尝试移除分页器名称,仅保留单个分页器,但问题仍未解决;
- 补充:点击分页后仅第一个元素会发生变化,其余元素保持原样。
对应的Livewire组件代码:
<?php namespace App\Http\Livewire\Admin; use App\Models\RevisaInvoice; use Livewire\Component; use Livewire\WithPagination; class RevisaInvoicesList extends Component { use WithPagination; public string $filenameSearch = ''; public string $companySearch = ''; public string $dateSearch = ''; public bool $showProcessed = false; public function render() { return view('livewire.admin.revisa-invoices-list', [ 'revisaInvoices' => RevisaInvoice::final() ->where('filename', 'LIKE', '%'.$this->filenameSearch.'%') ->whereHas('client', function ($q) { $q->where('name', 'LIKE', '%'.$this->companySearch.'%'); }) ->where('created_at', 'LIKE', '%'.$this->dateSearch.'%') ->where('is_processed', $this->showProcessed) ->orderBy('is_processed') ->orderByDesc('created_at') ->paginate(8, pageName: 'revisa-invoices') ]); } public function updated(): void { $this->resetPage(); } public function toggleProcessed(RevisaInvoice $revisaInvoice): void { $revisaInvoice->toggleProcessed(); } }
对应的Blade视图代码:
<div class="mt-2"> <label> <input wire:model.live="showProcessed" type="checkbox" class="rounded border-gray-400 placeholder-gray-200 mr-1 -mt-[2px]"> <span>{{ __('Show processed invoices') }}</span> </label> </div> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5"> @forelse($revisaInvoices as $revisaInvoice) <div class="relative mt-5" wire:key="revisaInvoice--{{ $revisaInvoice->id }}"> <div onclick="return confirm('Are you sure?') || event.stopImmediatePropagation()" wire:click="toggleProcessed({{ $revisaInvoice }})" class="absolute cursor-pointer -bottom-[12px] -right-[12px] px-[5px] py-[3px] bg-white rounded-full border group shadow z-10 {{ $revisaInvoice->is_processed ? 'hover:border-danger-700' : 'hover:border-success-700' }}" tabindex="0" title="{{ $revisaInvoice->is_processed ? __('Mark as unprocessed') : __('Mark as processed') }}"> @if($revisaInvoice->is_processed) <i class="fa-solid fa-times fa-fw group-hover:text-danger-700"></i> @else <i class="fa-solid fa-check fa-fw group-hover:text-success-700"></i> @endif </div> <div class="border rounded shadow relative {{ $revisaInvoice->is_processed ? 'border-success-400' : '' }}"> <a class="flex items-center text-primary-800 hover:text-secondary-400 p-3 rounded-t border-b {{ $revisaInvoice->is_processed ? 'bg-success-100' : '' }}" href="{{ route('admin.invoices.download', ['revisa', $revisaInvoice->id]) }}" title="{{ __('Download') . ': ' . $revisaInvoice->filename }}"> <i class="fa-solid fa-file-pdf text-2xl"></i> <span class="ml-2 overflow-ellipsis overflow-hidden whitespace-nowrap">{{ $revisaInvoice->filename }}</span> </a> <div class="{{ $revisaInvoice->is_processed ? 'bg-success-100' : 'bg-gray-50' }} px-3 py-2"> <small class="text-gray-300 block">{{ __('From') }}</small> <span>{{ $revisaInvoice->client->name }}</span> </div> <div class="{{ $revisaInvoice->is_processed ? 'bg-success-100' : 'bg-gray-50' }} px-3 py-2 rounded-b"> <small class="text-gray-300 block">{{ __('Created at') }}</small> <span>{{ date('d-m-Y', strtotime($revisaInvoice->created_at)) }}</span> </div> </div> </div> @empty <div class="mt-3 col-span-4"> <x-alert type="warning">{{ __('No invoices') }}</x-alert> </div> @endforelse </div> <div class="mt-5"> {{ $revisaInvoices->links() }} </div>
内容的提问来源于stack exchange,提问作者MomoDerDodo
相关产品推荐
相关产品推荐

