同一页面上多个组件的 Livewire 分页问题
P粉714780768
P粉714780768 2023-09-01 12:49:12
[PHP讨论组]
<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-&gt;activityLogRepository = $activityLogRepository; } public function mount(Model $model): void { $this-&gt;model = $model; } public function render(): View { return view('livewire.activity-logs.activity-logs', [ 'activities' =&gt; $this-&gt;activityLogRepository -&gt;getLogsForModel($this-&gt;model) -&gt;paginate(5, pageName: 'activityPage'), ]); } }</pre> <p><strong>activity-logs.blade.php</strong></p> <pre class="brush:php;toolbar:false;">&lt;x-cards.simple class=&quot;col-span-6 lg:col-span-3 xl:col-span-2 overscroll-contain&quot; max-height=&quot;lg&quot; title=&quot;{{ __('Activity Logs') }}&quot; icon=&quot;project&quot; &gt; &lt;div class=&quot;my-2 pr-2 h-full lg:max-h-[300px]&quot;&gt; @if($activities-&gt;isNotEmpty()) @foreach($activities as $activity) @dump($activity) @endforeach &lt;div class=&quot;mt-8&quot;&gt; {{ $activities-&gt;onEachSide(1)-&gt;links() }} &lt;/div&gt; @else &lt;span&gt; {{ __('This model has no logged activities.') }} &lt;/span&gt; @endif &lt;/div&gt; &lt;/x-cards.simple&gt;</pre> <p>如果您能了解我为何面临上述问题,我将不胜感激。谢谢!</p>
P粉714780768
P粉714780768

全部回复(1)
P粉107991030

您的嵌套组件似乎缺少 :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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号