동일한 페이지에 있는 여러 구성 요소의 Livewire 페이지 매김 문제

Question

<p>동일한 페이지에서 두 개의 페이지 매김 구성 요소를 사용할 때 Livewire 페이지 매김에 문제가 있습니다. 저는 여러 페이지네이터 사용에 대한 Livewire 문서의 조언을 따랐습니다. 그러나 구성 요소 중 하나의 페이지로 이동하려고 할 때마다 두 가지 문제가 발생합니다. </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;">class ActivityLogs는 구성 요소를 확장합니다. { WithPagination을 사용하십시오. 공개 모델 $model; 개인 ActivityLogRepository $activityLogRepository; 공개 함수 부팅(ActivityLogRepository $activityLogRepository): 무효 { $this->activityLogRepository = $activityLogRepository; } 공용 함수 마운트(모델 $model): 무효 { $this->모델 = $모델; } 공용 함수 render(): 보기 { return view('livewire.activity-logs.activity-logs', [ '활동' => $this->activityLogRepository ->getLogsForModel($this->model) ->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($활동을 $활동으로) @dump($활동) @endforeach <div class="mt-8"> {{ $activities->onEachSide(1)->links() }} </div> @또 다른 <스팬> {{ __('이 모델에는 기록된 활동이 없습니다.') }} </스팬> @endif </div> </x-cards.simple></pre> <p>위 문제가 발생한 이유를 이해해 주시면 감사하겠습니다. 감사해요! </p>

Answer 1

중첩된 구성요소에 구성요소를 추적하기 위한 :key 属性。由于 Livewire 需要知道应重新渲染哪个组件，因此使用 :key 속성이 누락된 것 같습니다.

업데이트된 활동-logs.blade.php

으아악

참조: https://laravel-livewire.com /docs/2.x/nesting-comComponents#keyed-comComponents