同一頁面上多個元件的 Livewire 分頁問題

Question

在同一頁面上使用兩個分頁元件時，我遇到了 Livewire 分頁問題。我遵循了 Livewire 文件關於使用多個分頁器的建議。但是，每當我嘗試導航到其中一個元件上的頁面時，我都會遇到兩個問題：

• 第一次導航時，它按預期工作，但後續嘗試不會重定向；
• 分頁導覽的連結在第一次重定向後消失；
• 如果我手動更改 URL，元件會反映更改並顯示正確的頁面。儘管單擊組件本身的頁面僅在第一次有效。

另一個元件如預期運行，其建立方式與顯示所描述問題的元件相同。

我嘗試遵循文件和調試，但沒有任何進展。這是我的程式碼的簡化版本，它大致基於文件。

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>

如果您能了解我為何面臨上述問題，我將不勝感激。謝謝！

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

#