Поля формы в Nuxt

Реальная форма редко состоит из одного поля. Контакты, регистрация, заказ - всё это набор именованных значений, которые удобно сложить в один объект и отправить одним запросом.

На сервере обработчик по-прежнему читает тело через readBody и достаёт нужные свойства. Клиент в body у $fetch передаёт столько полей, сколько собрал в форме.

Добавим в API приём имени и email контакта:

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

На странице заведём две переменные и привяжем их к полям ввода. В обработчике отправки передадим оба значения в body:

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

Имена ключей в объекте body должны совпадать с тем, что ожидает обработчик на сервере. Так проще читать код и отлаживать запросы.

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

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