同一页面上多个组件的 Livewire 分页问题

Question

在同一页面上使用两个分页组件时，我遇到了 Livewire 分页问题。我遵循了 Livewire 文档关于使用多个分页器的建议。但是，每当我尝试导航到其中一个组件上的页面时，我都会遇到两个问题：

• 第一次导航时，它按预期工作，但后续尝试不会重定向；
• 分页导航的链接在第一次重定向后消失；
• 如果我手动更改 URL，组件会反映更改并显示正确的页面。尽管单击组件本身的页面仅在第一次有效。

另一个组件按预期运行，其创建方式与显示所描述问题的组件相同。

我尝试遵循文档和调试，但没有任何进展。这是我的代码的简化版本，它大致基于文档。

ActivityLogs.php

class ActivityLogs extends Component
{
    use WithPagination;

    public Model $model;

    private ActivityLogRepository $activityLogRepository;

    public function boot(ActivityLogRepository $activityLogRepository): void
    {
        $this->activityLogRepository = $activityLogRepository;
    }

    public function mount(Model $model): void
    {
        $this->model = $model;
    }

   public function render(): View
   {
       return view('livewire.activity-logs.activity-logs', [
           'activities' => $this->activityLogRepository
               ->getLogsForModel($this->model)
               ->paginate(5, pageName: 'activityPage'),
       ]);
    }
}

activity-logs.blade.php

<x-cards.simple class="col-span-6 lg:col-span-3 xl:col-span-2 overscroll-contain"
                max-height="lg"
                title="{{ __('Activity Logs') }}"
                icon="project"
>
    <div class="my-2 pr-2 h-full lg:max-h-[300px]">
        @if($activities->isNotEmpty())
            @foreach($activities as $activity)
                @dump($activity)
            @endforeach

            <div class="mt-8">
                {{ $activities->onEachSide(1)->links() }}
            </div>
        @else
            <span>
                {{ __('This model has no logged activities.') }}
            </span>
        @endif
    </div>
</x-cards.simple>

如果您能了解我为何面临上述问题，我将不胜感激。谢谢！

Answer 1

您的嵌套组件似乎缺少 :key 属性。由于 Livewire 需要知道应重新渲染哪个组件，因此使用 :key 属性来跟踪组件。

更新了activity-logs.blade.php

<x-cards.simple class="col-span-6 lg:col-span-3 xl:col-span-2 overscroll-contain"
                max-height="lg"
                title="{{ __('Activity Logs') }}"
                icon="project"
>
    <div class="my-2 pr-2 h-full lg:max-h-[300px]">
        @if($activities->isNotEmpty())
            @foreach($activities as $activity)
                <livewire:common.activity-logs.activity-log :activity="$activity" :key="$activity->id" />
            @endforeach

            <div class="mt-8">
                {{ $activities->onEachSide(1)->links() }}
            </div>
        @else
            <span>
                {{ __('This model has no logged activities.') }}
            </span>
        @endif
    </div>
</x-cards.simple>

参考：https://laravel-livewire.com /docs/2.x/nesting-components#keyed-components