Isu penomboran Livewire dengan berbilang komponen pada halaman yang sama

Question

Saya menghadapi masalah dengan penomboran Livewire apabila menggunakan dua komponen penomboran pada halaman yang sama. Saya mengikuti nasihat dokumentasi Livewire tentang menggunakan berbilang penomboran. Walau bagaimanapun, apabila saya cuba menavigasi ke halaman pada salah satu komponen, saya menghadapi dua masalah:

• Kali pertama saya menavigasi ia berfungsi seperti yang diharapkan, tetapi percubaan berikutnya tidak mengubah hala;
• Pautan ke navigasi bernombor hilang selepas ubah hala pertama;
• Jika saya menukar URL secara manual, komponen itu mencerminkan perubahan dan memaparkan halaman yang betul. Walaupun mengklik halaman pada komponen itu sendiri hanya berfungsi pada kali pertama.

Komponen lain berfungsi seperti yang diharapkan dan dicipta dengan cara yang sama seperti komponen yang menunjukkan masalah yang diterangkan.

Saya cuba mengikuti dokumentasi dan penyahpepijatan, tetapi tidak kesampaian. Berikut ialah versi ringkas kod saya, secara longgar berdasarkan dokumentasi.

ActivityLogs.php

class ActivityLogs memanjangkan Komponen
{
    gunakan WithPagination;

    Model awam $model;

    Peribadi ActivityLogRepository $activityLogRepository;

    but fungsi awam(ActivityLogRepository $activityLogRepository): batal
    {
        $this->activityLogRepository = $activityLogRepository;
    }

    pelekap fungsi awam(Model $model): batal
    {
        $this->model = $model;
    }

   fungsi awam render(): Lihat
   {
       paparan kembali('livewire.activity-logs.activity-logs', [
           'aktiviti' => $this->activityLogRepository
               ->getLogsForModel($this->model)
               ->halaman(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="{{ __('Log Aktiviti') }}"
                icon="projek"
>
    <div class="my-2 pr-2 h-penuh lg:max-h-[300px]">
        @if($activities->isNotEmpty())
            @foreach($aktiviti sebagai $aktiviti)
                @dump($aktiviti)
            @endforeach

            <div class="mt-8">
                {{ $aktiviti->onEachSide(1)->pautan() }}
            </div>
        @lain
            <span>
                {{ __('Model ini tidak mempunyai aktiviti log.') }}
            </span>
        @endif
    </div>
</x-cards.simple>

Saya akan berterima kasih jika anda dapat memahami mengapa saya menghadapi masalah di atas. Terima kasih!

Answer 1

Komponen bersarang anda nampaknya kehilangan atribut :key 属性。由于 Livewire 需要知道应重新渲染哪个组件，因此使用 :key untuk menjejak komponen.

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

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