Laravelのlivewireでpaginationが動かないとき

livewireでページネーションを組み合わせて実装していたとき、表示して1回目のリンクは問題なく動作するが、2回目以降は動作しないという問題が起きていました。

今回私がハマった理由は、wire:keyの使い方が間違っていました。

元のコードは以下のような形です。

@foreach ($users as $user)
    <div>
        <livewire:basic-info />
        <livewire:details />
    </div>
@endforeach

間違った例はこんな感じ。

@foreach ($users as $user)
    <div :wire:key="$user->id">
        <livewire:basic-info />
        <livewire:details />
    </div>
@endforeach

うまく動作した例はこうでした。

@foreach ($users as $user)
    <div>
        <livewire:basic-info :wire:key="'basic-info-' . $user->id" />
        <livewire:details :wire:key="'details-' . $user->id" />
    </div>
@endforeach

それぞれのlivewireコンポーネントにkeyを設定する必要があるようです。

この記事について詳しく相談したい方へ