Livewire-Paginierungsproblem mit mehreren Komponenten auf derselben Seite

Question

Ich habe Probleme mit der Livewire-Paginierung, wenn ich zwei Paginierungskomponenten auf derselben Seite verwende. Ich habe den Ratschlag der Livewire-Dokumentation zur Verwendung mehrerer Paginatoren befolgt. Wenn ich jedoch versuche, zu einer Seite einer der Komponenten zu navigieren, stoße ich auf zwei Probleme:

• Beim ersten Navigieren funktioniert es wie erwartet, aber bei nachfolgenden Versuchen erfolgt keine Umleitung;
• Links zur paginierten Navigation verschwinden nach der ersten Weiterleitung;
• Wenn ich die URL manuell ändere, spiegelt die Komponente die Änderung wider und zeigt die richtige Seite an. Allerdings funktioniert das Klicken auf die Seite auf der Komponente selbst nur beim ersten Mal.

Die andere Komponente funktioniert wie erwartet und wurde auf die gleiche Weise erstellt wie die Komponente, bei der das beschriebene Problem auftritt.

Ich habe versucht, der Dokumentation zu folgen und Fehler zu beheben, bin aber nicht weitergekommen. Hier ist eine vereinfachte Version meines Codes, die lose auf der Dokumentation basiert.

ActivityLogs.php

class ActivityLogs erweitert Komponente
{
    verwenden Sie WithPagination;

    öffentliches Modell $model;

    privates ActivityLogRepository $activityLogRepository;

    öffentliche Funktion boot(ActivityLogRepository $activityLogRepository): void
    {
        $this->activityLogRepository = $activityLogRepository;
    }

    öffentliche Funktion mount(Modell $model): void
    {
        $this->model = $model;
    }

   öffentliche Funktion 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="Projekt"
>
    <div class="my-2 pr-2 h-full lg:max-h-[300px]">
        @if($activities->isNotEmpty())
            @foreach($activities als $activity)
                @dump($aktivität)
            @endforeach

            <div class="mt-8">
                {{ $activities->onEachSide(1)->links() }}
            </div>
        @anders
            <spanne>
                {{ __('Dieses Modell hat keine protokollierten Aktivitäten.') }}
            </span>
        @endif
    </div>
</x-cards.simple>

Ich wäre Ihnen dankbar, wenn Sie verstehen könnten, warum ich mit dem oben genannten Problem konfrontiert bin. Danke!

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