Хотя с помощью Inertia можно отправлять классические формы, это не рекомендуется, так как они вызывают полную перезагрузку страницы. Вместо этого лучше перехватить отправленные формы, а затем сделать запрос с помощью Inertia.
<template>
<form @submit.prevent="submit">
<label for="first_name">Имя:</label>
<input id="first_name" v-model="form.first_name" />
<label for="last_name">Фамилия:</label>
<input id="last_name" v-model="form.last_name" />
<label for="email">Эл. почта:</label>
<input id="email" v-model="form.email" />
<button type="submit">Отправить</button>
</form>
</template>
<script>
import { reactive } from 'vue'
import { Inertia } from '@inertiajs/inertia'
export default {
setup () {
const form = reactive({
first_name: null,
last_name: null,
email: null,
})
function submit() {
Inertia.post('/users', form)
}
return { form, submit }
},
}
</script>В отличие от классической формы отправки ajax, с помощью Inertia Вы не обрабатываете поведение отправки сообщения на стороне клиента. Скорее, Вы делаете это на стороне сервера, используя перенаправление. И, конечно же, ничто не мешает Вам перенаправить обратно на страницу, на которой Вы находитесь.
class UsersController extends Controller
{
public function index()
{
return Inertia::render('Users/Index', [
'users' => User::all(),
]);
}
public function store()
{
User::create(
Request::validate([
'first_name' => ['required', 'max:50'],
'last_name' => ['required', 'max:50'],
'email' => ['required', 'max:50', 'email'],
])
);
return Redirect::route('users.index');
}
}Обработка ошибок валидации на стороне сервера в Inertia работает немного иначе, чем классическая форма, управляемая ajax, где вы отлавливаете ошибки валидации из ответов 422 и вручную обновляете состояние ошибки формы. Это потому, что Inertia никогда не получает ответов 422. Скорее, Inertia работает больше как стандартная отправка полностраничной формы.
Смотрите страницу проверки для получения дополнительной информации.
Поскольку работа с формами настолько распространена, Inertia поставляется с помощником формы, который помогает сократить количество шаблонов, необходимых для типичных форм. Вот как им пользоваться:
<template>
<form @submit.prevent="form.post('/login')">
<!-- email -->
<input type="text" v-model="form.email">
<div v-if="form.errors.email">{{ form.errors.email }}</div>
<!-- password -->
<input type="password" v-model="form.password">
<div v-if="form.errors.password">{{ form.errors.password }}</div>
<!-- remember me -->
<input type="checkbox" v-model="form.remember"> Запомните меня
<!-- submit -->
<button type="submit" :disabled="form.processing">Войти</button>
</form>
</template>
<script>
import { useForm } from '@inertiajs/inertia-vue3'
export default {
setup () {
const form = useForm({
email: null,
password: null,
remember: false,
})
return { form }
},
}
</script>Чтобы отправить форму, используйте методы get, post, put, patch и delete.
form.submit(method, url, options)
form.get(url, options)
form.post(url, options)
form.put(url, options)
form.patch(url, options)
form.delete(url, options)Методы отправки поддерживают все обычные параметры посещения, такие как preserveState, preserveScroll и обратные вызовы событий. Это может быть полезно для выполнения задач при успешной отправке формы, таких как сброс входных данных.
form.post('/profile', {
preserveScroll: true,
onSuccess: () => form.reset('password'),
})Если Вам нужно изменить данные формы перед их отправкой на сервер, Вы можете сделать это с помощью метода transform().
form
.transform((data) => ({
...data,
remember: data.remember ? 'on' : '',
}))
.post('/login')Вы можете использовать свойство processing, чтобы отслеживать, отправляется ли форма в данный момент. Это может быть полезно для предотвращения двойной отправки формы, отключив кнопку отправки.
<button type="submit" :disabled="form.processing">Отправить</button>Если Вы загружаете файлы, текущее событие progress доступно через свойство progress. Это полезно для отображения прогресса загрузки. Например:
<progress v-if="form.progress" :value="form.progress.percentage" max="100">
{{ form.progress.percentage }}%
</progress>В случае ошибок формы они доступны через свойство errors.
<div v-if="form.errors.email">{{ form.errors.email }}</div>Чтобы проверить, есть ли в форме какие-либо ошибки, используйте свойство hasErrors. Чтобы удалить ошибки формы, используйте метод clearErrors().
// Очистить все ошибки
form.clearErrors()
// Удалить ошибки для определенных полей
form.clearErrors('field', 'anotherfield')Когда форма была успешно отправлена, свойство wasSuccessful будет иметь значение true. В дополнение к этому, есть также свойство recentlySuccessful, которому будет присвоено значение true в течение двух секунд после успешной отправки формы. Это полезно для отображения временных сообщений об успехе.
Чтобы восстановить исходные значения формы, используйте метод reset(). Обратите внимание: это вернет значения к исходным значениям, которые были предоставлены при первом создании экземпляра помощника формы.
// Сбросить форму
form.reset()
// Сбросить определенные поля
form.reset('field', 'anotherfield')Чтобы вспомогательные данные формы и ошибки автоматически запоминались в состоянии истории, Вы можете предоставить уникальный ключ формы в качестве первого аргумента при создании экземпляра Вашей формы.
import { useForm } from '@inertiajs/inertia-vue3'
const form = useForm('CreateUser', data)
const form = useForm(`EditUser:${user.id}`, data)При посещении, включающем файлы, Inertia автоматически преобразует данные запроса в объект FormData.
Смотрите страницу загрузка файлов для получения дополнительной информации.
Использование Inertia для отправки форм отлично подходит для подавляющего большинства ситуаций. Однако, если Вам нужен более точный контроль над отправкой формы, ничто не мешает Вам вместо этого делать простые запросы xhrили fetch. Совершенно нормально использовать оба подхода в одном приложении!