Problème de pagination Livewire avec plusieurs composants sur la même page

Question

Je rencontre des problèmes avec la pagination Livewire lorsque j'utilise deux composants de pagination sur la même page. J'ai suivi les conseils de la documentation Livewire sur l'utilisation de plusieurs paginateurs. Cependant, chaque fois que j'essaie d'accéder à une page sur l'un des composants, je rencontre deux problèmes :

• La première fois que je navigue, le système fonctionne comme prévu, mais les tentatives suivantes ne redirigent pas ;
• Les liens vers la navigation paginée disparaissent après la première redirection ;
• Si je modifie l'URL manuellement, le composant reflète la modification et affiche la page correcte. Bien que cliquer sur la page du composant lui-même ne fonctionne que la première fois. ≪/li>

L'autre composant fonctionne comme prévu et a été créé de la même manière que le composant qui présente le problème décrit.

J'ai essayé de suivre la documentation et le débogage, mais je n'ai abouti à rien. Voici une version simplifiée de mon code, vaguement basée sur la documentation.

ActivityLogs.php

class ActivityLogs étend le composant
{
    utilisez WithPagination ;

    modèle public $model ;

    private ActivityLogRepository $activityLogRepository ;

    démarrage de la fonction publique (ActivityLogRepository $activityLogRepository) : void
    {
        $this->activityLogRepository = $activityLogRepository;
    }

    montage de fonction publique (Modèle $model) : void
    {
        $this->modèle = $modèle;
    }

   fonction publique render() : vue
   {
       return view('livewire.activity-logs.activity-logs', [
           'activités' => $this->activityLogRepository
               ->getLogsForModel($ce->modèle)
               ->paginate(5, nom de la page : 'activityPage'),
       ]);
    }
}</pré>
<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" ;
                hauteur-max = "lg"
                title="{{ __('Journaux d'activité') }}"
                icon="projet"
>
    <div class="my-2 pr-2 h-full lg:max-h-[300px]">
        @if($activités->isNotEmpty())
            @foreach ($activités en tant que $activité)
                @dump ($activité)
            @endforeach

            <div class="mt-8">
                {{ $activités->onEachSide(1)->links() }}
            </div>
        @autre
            <envergure>
                {{ __('Ce modèle n'a aucune activité enregistrée.') }}
            </envergure>
        @fin si
    </div>
</x-cards.simple>

Je vous serais reconnaissant si vous pouviez comprendre pourquoi je suis confronté au problème ci-dessus. Merci!

Answer 1

Votre composant imbriqué semble manquer de l'attribut :key 属性。由于 Livewire 需要知道应重新渲染哪个组件，因此使用 :key pour suivre le composant.

Activity-logs.blade.php mis à jour

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

Référence : https://laravel-livewire.com /docs/2.x/nesting-components#keyed-components