Данные отдельного запроса в Inertia

Пусть поле поиска уже шлёт запрос через useHttp, но под строкой нужно показать найденные заголовки, а не только надпись о загрузке. Ответ лежит в теле HTTP, и его нужно забрать на клиенте после успешного завершения.

Методы отправки у хелпера принимают объект опций. Колбэк onSuccess вызывают, когда сервер ответил удачно: первым аргументом приходит уже разобранный JSON, вторым - объект ответа с полями status, data и headers. Тот же метод возвращает Promise, который тоже резолвится разобранными данными, если удобнее ждать результат через await.

Давайте отдадим страницу и адрес, который возвращает список строк:

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

	Route::get('/posts/search', function () {
		return Inertia::render('Posts/Search');
	});

	Route::get('/api/posts/search', function (Request $request) {
		return response()->json([
			'hits' => ['News', 'Notes'],
		]);
	});
?>

Давайте сохраним hits из колбэка и выведем список:

<script setup>
	import { ref } from 'vue'
	import { useHttp } from '@inertiajs/vue3'

	const http = useHttp({
		query: '',
	})

	const hits = ref([])

	function runSearch() {
		http.get('/api/posts/search', {
			onSuccess: (data) => {
				hits.value = data.hits
			},
		})
	}
</script>

<template>
	<h1>Search</h1>
	<input v-model="http.query" @input="runSearch" />
	<ul>
		<li v-for="item in hits" :key="item">
			{{ item }}
		</li>
	</ul>
</template>

Сделайте страницу TeamFinder так, чтобы после успешного отдельного запроса под полем появлялись фамилии из тела ответа сервера.