Бесконечный список в Inertia

Давайте посмотрим на компонент InfiniteScroll. Он оборачивает ленту, где вместо кнопки следующей страницы человек просто крутит экран вниз. Когда до конца списка остаётся немного пикселей, клиент сам запрашивает следующую страницу пагинации и дописывает строки к уже показанным.

Атрибут data указывает имя пропса с постраничным объектом Laravel. Без обёртки scroll у класса Inertia на сервере компонент не знает, как сливать ответы, поэтому пропс отдают внутри замыкания с этим методом.

Давайте отдадим посты через scroll и пагинацию:

<?php
	use Illuminate\Pagination\LengthAwarePaginator;
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/posts', function () {
		return Inertia::render('Posts/Index', [
			'posts' => Inertia::scroll(function () {
				$all = [
					['id' => 1, 'title' => 'Alpha'],
					['id' => 2, 'title' => 'Beta'],
					['id' => 3, 'title' => 'Gamma'],
					['id' => 4, 'title' => 'Delta'],
				];
				$page = request()->integer('page', 1);
				$perPage = 2;
				$slice = array_slice(
					$all,
					($page - 1) * $perPage,
					$perPage,
				);

				return new LengthAwarePaginator(
					$slice,
					count($all),
					$perPage,
					$page,
				);
			}),
		]);
	});
?>

Давайте обернём список в InfiniteScroll и выведем поле data:

<script setup>
	import { InfiniteScroll } from '@inertiajs/vue3'

	defineProps({
		posts: Object,
	})
</script>

<template>
	<InfiniteScroll data="posts">
		<ul>
			<li
				v-for="post in posts.data"
				:key="post.id"
			>
				{{ post.title }}
			</li>
		</ul>
	</InfiniteScroll>
</template>

Сделайте ленту работников склада так, чтобы при прокрутке вниз к уже видимым именам дописывались следующие, без отдельной кнопки перехода.