Can you use more than one <InfiniteScroll> component in a single page?

[aalhoura]

I tried using more than one <InfiniteScroll> component in my page where each <InfiniteScroll> component works with a different data prop, like so:

<InfiniteScroll data="users">
  <div v-for="user in users.data" :key="user.id">
    {{ user.name }}
  </div>
</InfiniteScroll>

<InfiniteScroll data="users2">
  <div v-for="user in users2.data" :key="user.id">
    {{ user.name }}
  </div>
</InfiniteScroll>

but I got this error in the console:

Uncaught Error: The page object does not contain a scroll prop named "users2".
    at getScrollPropFromCurrentPage (@inertiajs_vue3.js?v=106f2e8f:15393:11)
    at getPageName (@inertiajs_vue3.js?v=106f2e8f:15415:29)
    at fetchPage (@inertiajs_vue3.js?v=106f2e8f:15424:16)
    at fetchNext (@inertiajs_vue3.js?v=106f2e8f:15455:40)
    at dataManager.fetchNext (@inertiajs_vue3.js?v=106f2e8f:15734:5)
    at callWithErrorHandling (chunk-LG6AQRJS.js?v=106f2e8f:2296:19)
    at callWithAsyncErrorHandling (chunk-LG6AQRJS.js?v=106f2e8f:2303:17)
    at HTMLButtonElement.invoker (chunk-LG6AQRJS.js?v=106f2e8f:11335:5)

[francoism90]

You need to load that prop, is it defined in defineProps?

To prevent clashes, I think you'll need to overrule the target (see docs), and also the page query. I believe this is also documented.

[pascalbaljet]

Please retry with v2.2.3

[aalhoura]

I just tried it and it looks like it works! Here are two <InfiniteScroll> components next to each other. I used the manual option for both.

two_inf_scroll.mp4

It looks like the ?page= query is shared between the two. Not sure if that is an issue.

[pascalbaljet]

You need to pass another pageName to the paginate() method: https://laravel.com/docs/12.x/pagination#multiple-paginator-instances-per-page

The Inertia::scroll() method will automatically pick it up.

[aalhoura]

Thank you Pascal!