You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.07 17:57:01