Слияние пропсов в Inertia

Давайте рассмотрим ситуацию, когда на экране уже показана часть меток, а человек нажимает «ещё» и ждёт, что новые пункты появятся под старыми, а не заменят весь список.

При обычном ответе Inertia пропс с тем же именем перезаписывает старое значение в памяти клиента. Метод merge помечает массив так, что при повторном запросе на ту же страницу новые элементы дописываются к уже показанным. Полный заход на адрес по-прежнему заменяет пропс целиком, как без слияния.

Давайте отдадим первую порцию меток и обернём массив в merge:

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

	Route::get('/tags', function () {
		$all = [
			'Laravel', 'Vue', 'Inertia',
			'Tailwind', 'Vite', 'PHP',
		];
		$page = (int) request()->input('page', 1);
		$chunk = array_slice($all, ($page - 1) * 2, 2);

		return Inertia::render('Tags/Index', [
			'tags' => Inertia::merge($chunk),
			'page' => $page,
		]);
	});
?>

Давайте увеличим номер страницы и запросим с клиента только пропс tags:

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

	const props = defineProps({
		tags: Array,
		page: Number,
	})

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

<template>
	<ul>
		<li v-for="tag in tags" :key="tag">
			{{ tag }}
		</li>
	</ul>
	<button type="button" @click="loadMore">
		Load more
	</button>
</template>

Сделайте экран работника Daria с пропсом skills, чтобы при нажатии «Load more» новые навыки PHP и Redis дописывались к уже показанным HTML и CSS, а не заменяли их.