Livewire pagination issue with multiple components on the same page

Question

I'm having issues with Livewire pagination when using two pagination components on the same page. I followed the Livewire documentation's advice on using multiple paginators. However, whenever I try to navigate to a page on one of the components, I run into two problems:

• The first time I navigate it works as expected, but subsequent attempts don't redirect;
• Links to paginated navigation disappear after first redirect;
• If I change the URL manually, the component reflects the change and displays the correct page. Although clicking the page on the component itself only works the first time.

The other component works as expected and was created in the same way as the component that is showing the problem described.

I tried following the documentation and debugging, but got nowhere. Here's a simplified version of my code, loosely based on the documentation.

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>

I would be grateful if you could understand why I am facing the above problem. Thanks!

Answer 1

Your nested component appears to be missing the :key attribute. Since Livewire needs to know which component should be re-rendered, the :key attribute is used to track the component.

Updated 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>

Reference: https://laravel-livewire.com /docs/2.x/nesting-components#keyed-components