Сброс полей в Inertia

Представим, что человек изменил начальный текст в поле и хочет вернуть форму к тому виду, что был при открытии, не отправляя данные на сервер. Отменить набор вручную долго, особенно если правок было несколько.

В слоте есть метод reset: он возвращает поля к начальным значениям. Кнопка сброса не должна отправлять форму, поэтому у неё тип обычной кнопки, а сброс вызывают по клику.

Давайте опишем адрес формы и приём полей:

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

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

	Route::post('/posts', function (Request $request) {
		return back();
	});
?>

Давайте добавим начальный текст, сохранение и сброс:

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

<template>
	<Form action="/posts" method="post" #default="{ reset }">
		<input
			type="text"
			name="title"
			defaultValue="News"
		/>
		<button type="submit">Save</button>
		<button type="button" @click="reset">
			Reset
		</button>
	</Form>
</template>

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