Отдельный запрос в Inertia

Давайте изучим хелпер useHttp. Он подключается из пакета @inertiajs/vue3 и ведёт себя похоже на работу с полями формы, но запрос не запускает визит: страница Inertia остаётся той же, компонент не подменяется, а ответ приходит как обычный JSON с другого адреса Laravel или внешнего API.

В аргумент передают начальные данные - объект с полями, которые уйдут на сервер. Хелпер возвращает реактивное состояние и методы get, post и другие для отправки. Флаг processing показывает, идёт ли запрос, его удобно вывести рядом с полем ввода. Такой запрос не участвует в жизненном цикле страницы и не трогает пропсы визита.

Давайте отдадим страницу поиска и JSON-адрес подсказок:

<?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'],
		]);
	});
?>

Давайте свяжем поле, метод get и индикатор загрузки:

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

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

	function runSearch() {
		http.get('/api/posts/search')
	}
</script>

<template>
	<h1>Search</h1>
	<input v-model="http.query" @input="runSearch" />
	<p v-if="http.processing">Searching...</p>
</template>

Сделайте страницу StaffLookup с полем имени и отдельным JSON-адресом, чтобы запрос подсказок не менял открытый компонент Inertia.