Home  >  Q&A  >  body text

Livewire pagination issue with multiple components on the same page

<p>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: </p> <ul> <li>The first time I navigate it works as expected, but subsequent attempts don't redirect;</li> <li>Links to paginated navigation disappear after first redirect;</li> <li>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. </li> </ul> <p>The other component works as expected and was created in the same way as the component that is showing the problem described. </p> <p>I tried following the documentation and debugging, but got nowhere. Here's a simplified version of my code, loosely based on the documentation. </p> <p><strong>ActivityLogs.php</strong></p> <pre class="brush:php;toolbar:false;">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'), ]); } }</pre> <p><strong>activity-logs.blade.php</strong></p> <pre class="brush:php;toolbar:false;"><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></pre> <p>I would be grateful if you could understand why I am facing the above problem. Thanks! </p>
P粉714780768P粉714780768438 days ago490

reply all(1)I'll reply

  • P粉107991030

    P粉1079910302023-09-02 10:49:14

    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

    reply
    0
  • Cancelreply