同一頁面上多個元件的 Livewire 分頁問題
P粉714780768
2023-09-01 12:49:12
<p>在同一頁面上使用兩個分頁元件時,我遇到了 Livewire 分頁問題。我遵循了 Livewire 文件關於使用多個分頁器的建議。但是,每當我嘗試導航到其中一個元件上的頁面時,我都會遇到兩個問題:</p>
<ul>
<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 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'),
]);
}
}</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" ;
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></pre>
<p>如果您能了解我為何面臨上述問題,我將不勝感激。謝謝! </p>
您的巢狀元件似乎缺少
:key
屬性。由於 Livewire 需要知道要重新渲染哪個元件,因此使用:key
屬性來追蹤元件。更新了activity-logs.blade.php
#參考:https://laravel-livewire.com /docs/2.x/nesting-components#keyed-components
#