Редактирование и черновики

Формы редактирования отличаются от форм создания: данные уже есть, отправлять нужно только изменения, а потерять правки обидно.

Загрузка данных

Начальные значения часто приходят с сервера уже после создания формы. Передайте их в reset — они станут новой точкой отсчёта для dirty и changes:

const form = useForm(UpdateUser, { initial: { name: '', email: '', bio: '' } });

onMounted(async () => {
  const user = await api.get(`/users/${id}`);
  form.reset({ name: user.name, email: user.email, bio: user.bio ?? '' });
});

Только изменённые поля — PATCH

form.changes содержит только то, что пользователь поменял. Вместе со схемой partial это готовый PATCH:

const submit = form.handleSubmit(async () => {
  await api.patch(`/users/${id}`, form.changes); // { bio: 'New bio' }
});

<button :disabled="!form.dirty || form.submitting">Save</button>
<span v-if="form.isDirty('email')">Email will be changed</span>

После успешной отправки текущие значения считаются сохранёнными: dirty становится false, changes — пустым. Если в обработчике вызван setErrors (сервер отклонил данные), изменения остаются несохранёнными.

Черновик и предупреждение об уходе

useDraft сохраняет введённое и восстанавливает его после перезагрузки, useLeaveGuard предупреждает при закрытии вкладки с несохранёнными изменениями:

const form = useForm(Post, { initial: { title: '', body: '' } });
useDraft(form, `post-${id}`);
useLeaveGuard(form);

См. также

• partial
• useForm