Добавление к списку в Inertia

Пусть список работников приходит не простым массивом, а объектом пагинации Laravel: строки лежат во вложенном поле data, а рядом число страниц и ссылки. При догрузке нужно дописать новые строки, но обновить остальные поля объекта.

Метод merge умеет уточнять, какой вложенный массив сливать. Цепочка append на результате merge указывает имя поля, куда новые элементы добавляются в конец. Всё остальное в объекте пропса при этом заменяется свежими значениями с сервера.

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

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

	Route::get('/workers', function () {
		$all = [
			['id' => 1, 'name' => 'Anna'],
			['id' => 2, 'name' => 'Boris'],
			['id' => 3, 'name' => 'Clara'],
			['id' => 4, 'name' => 'Denis'],
		];
		$page = (int) request()->input('page', 1);
		$perPage = 2;
		$slice = array_slice(
			$all,
			($page - 1) * $perPage,
			$perPage
		);

		$payload = [
			'data' => $slice,
			'current_page' => $page,
			'last_page' => (int) ceil(count($all) / $perPage),
		];

		return Inertia::render('Workers/Index', [
			'workers' => Inertia::merge($payload)->append('data'),
		]);
	});
?>

Давайте выведем имена и запросим следующую страницу только для пропса workers:

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

	const props = defineProps({
		workers: Object,
	})

	function nextPage() {
		if (props.workers.current_page >= props.workers.last_page) {
			return
		}

		router.reload({
			data: { page: props.workers.current_page + 1 },
			only: ['workers'],
		})
	}
</script>

<template>
	<ul>
		<li
			v-for="row in workers.data"
			:key="row.id"
		>
			{{ row.name }}
		</li>
	</ul>
	<button type="button" @click="nextPage">
		Next page
	</button>
</template>

Сделайте список работников отдела Logistics по страницам так, чтобы вторая страница дописывала имена к первой, а номер страницы на экране обновлялся.