Livewire分页问题,同一页面上有多个组件。

huangapple go评论70阅读模式
英文:

Livewire pagination issue with multiple components on the same page

问题

I'm facing an issue with Livewire pagination when using two components with pagination on the same page. I followed the Livewire documentation's suggestion for using multiple paginators. However, whenever I try to navigate to the page on one of the components, I'm encountering two problems:

  • The first time I navigate, it works as expected, but the subsequent attempts won't redirect;
  • The links for pagination navigation disappear after the first redirect;
  • If I change the URL manually, the component reflects the change and shows the correct page. Although clicking on the pages in the component itself only works the first time.

The other component operates as intended, it's created in the same way as the one that shows the described problems.

I tried following the documentation and debugging, but it didn't get me anywhere. So here's a simplified version of my code, which is loosely based on the docs.

ActivityLogs.php

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'),
       ]);
    }
}

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)
                @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>

I would appreciate any insights into why I'm facing the previously described problems. Thank you!

英文:

I'm facing an issue with Livewire pagination when using two components with pagination on the same page. I followed the Livewire documentation's suggestion for using multiple paginators. However, whenever I try to navigate to the page on one of the components, I'm encountering two problems:

  • The first time I navigate, it works as expected, but the subsequent attempts won't redirect;
  • The links for pagination navigation disappear after the first redirect;
  • If I change the url manually, the component reflects the change and shows the correct page. Althought clicking on the pages in the component itself only works the first time.

The other component operates as intended, it's created in the same way as the one that shows the described problems.

I tried following the documentation and debugging, but it didn't get me anywhere. So here's a simplified version of my code, which is loosely based on the docs.

ActivityLogs.php

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(&#39;livewire.activity-logs.activity-logs&#39;, [
           &#39;activities&#39; =&gt; $this-&gt;activityLogRepository
               -&gt;getLogsForModel($this-&gt;model)
               -&gt;paginate(5, pageName: &#39;activityPage&#39;),
       ]);
    }
}

activity-logs.blade.php

&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;{{ __(&#39;Activity Logs&#39;) }}&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;
                {{ __(&#39;This model has no logged activities.&#39;) }}
            &lt;/span&gt;
        @endif
    &lt;/div&gt;
&lt;/x-cards.simple&gt;

I would appreciate any insights into why I'm facing the previously described problems. Thank you!

答案1

得分: 0

It seems like you're missing the :key attribute on your nested component. Because Livewire needs to know which component should be rerendered, the :key attribute is used to keep track of components.

Updated 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>

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

英文:

It seems like you're missing the :key attribute on your nested component. Because Livewire needs to know which component should be rerendered, the :key attribute is used to keep track of components.

Updated activity-logs.blade.php

&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;{{ __(&#39;Activity Logs&#39;) }}&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)
                &lt;livewire:common.activity-logs.activity-log :activity=&quot;$activity&quot; :key=&quot;$activity-&gt;id&quot; /&gt;
            @endforeach

            &lt;div class=&quot;mt-8&quot;&gt;
                {{ $activities-&gt;onEachSide(1)-&gt;links() }}
            &lt;/div&gt;
        @else
            &lt;span&gt;
                {{ __(&#39;This model has no logged activities.&#39;) }}
            &lt;/span&gt;
        @endif
    &lt;/div&gt;
&lt;/x-cards.simple&gt;

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

huangapple
  • 本文由 发表于 2023年5月22日 20:04:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/76306012.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定