Отправка формы в Nuxt

Когда пользователь нажимает кнопку отправки, браузер по умолчанию перезагружает страницу. В SPA нам нужно перехватить это событие, собрать значения полей и отправить их на наш API без перезагрузки.

На стороне Nuxt обработчик лежит в server/api/notes.post.js. Имя файла задаёт метод HTTP и сегмент пути: запрос POST на /api/notes попадёт в эту функцию. Тело запроса читают через readBody, после чего можно вернуть JSON клиенту.

Давайте изучим серверную часть для сохранения заголовка заметки:

export default defineEventHandler(async (event) => {
	const body = await readBody(event);
	
	return {
		title: body.title,
	};
});

На странице создадим форму с одним полем и привяжем его к переменной через v-model. Обработчик submit вешаем с модификатором prevent, чтобы отменить стандартное поведение. Внутри вызовем $fetch с методом POST и телом body:

<script setup>
	const title = ref('');
	
	async function submitForm() {
		await $fetch('/api/notes', {
			method: 'POST',
			body: { title: title.value },
		});
	}
</script>
<template>
	<form @submit.prevent="submitForm">
		<input v-model="title" type="text">
		<button type="submit">
			Save
		</button>
	</form>
</template>

После отправки сервер вернёт объект с тем же title. Пока мы не выводим ответ на экран - важно, что запрос доходит до notes.post.js и данные не теряются при перехвате формы.

Сделайте страницу с формой, которая отправляет имя сотрудника на ваш API методом POST.

Сделайте обработчик API, который принимает имя сотрудника в теле запроса и возвращает его в ответе.