同じページ上の複数のコンポーネントに関する Livewire ページネーションの問題
P粉714780768
P粉714780768 2023-09-01 12:49:12
0
1
539
<p>同じページで 2 つのページネーション コンポーネントを使用すると、Livewire のページネーションで問題が発生します。複数のページネータの使用に関する Livewire ドキュメントのアドバイスに従いました。ただし、いずれかのコンポーネントのページに移動しようとすると、常に 2 つの問題が発生します。 </p>
    <li>初めてナビゲートしたときは期待どおりに動作しますが、それ以降の試行ではリダイレクトされません。</li> <li>最初のリダイレクト後にページ分割されたナビゲーションへのリンクが表示されなくなります;</li> <li>URL を手動で変更すると、コンポーネントに変更が反映され、正しいページが表示されます。ただし、コンポーネント自体のページをクリックしても機能するのは初回のみです。 </li> </ul> <p>他のコンポーネントは期待どおりに動作し、説明されている問題が発生しているコンポーネントと同じ方法で作成されました。 </p> <p>ドキュメントに従ってデバッグを試みましたが、うまくいきませんでした。これは、ドキュメントに大まかに基づいた、私のコードの簡略化されたバージョンです。 </p> <p><strong>ActivityLogs.php</strong></p> <pre class="brush:php;toolbar:false;">クラス ActivityLogs はコンポーネントを拡張します { WithPagination を使用します。 パブリックモデル $model; プライベート ActivityLogRepository $activityLogRepository; パブリック関数ブート(ActivityLogRepository $activityLogRepository): void { $this->activityLogRepository = $activityLogRepository; } パブリック関数マウント(Model $model): void { $this->model = $model; } パブリック関数 render(): ビュー { return view('livewire.activity-logs.activity-logs', [ 'アクティビティ' => $this->activityLogRepository ->getLogsForModel($this->モデル) ->paginate(5, pageName: 'activityPage'), ]); } }</pre> <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" ; 最大高さ= "lg" title="{{ __('アクティビティログ') }}" icon="プロジェクト" > <div class="my-2 pr-2 h-full lg:max-h-[300px]"" @if($activities->isNotEmpty()) @foreach($activities として $activity) @dump($activity) @endforeach <div class="mt-8"> {{ $activities->onEachSide(1)->links() }} </div> @それ以外 <スパン> {{ __('このモデルにはログに記録されたアクティビティがありません。') }} </span> @endif </div> </x-cards.simple></pre> <p>私が上記の問題に直面している理由をご理解いただければ幸いです。ありがとう! </p>
P粉714780768
P粉714780768

全員に返信(1)
P粉107991030

ネストされたコンポーネントに :key 属性が欠落しているようです。 Livewire はどのコンポーネントを再レンダリングする必要があるかを知る必要があるため、:key 属性を使用してコンポーネントを追跡します。

アクティビティログ.blade.phpを更新しました

リーリー

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

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート