Vue Academy · Lesson

Form Submission and Reset

@submit.prevent, FormData, resetting form state, disabling submit during loading.

Form Submission and Reset is a free Vue Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Handling Form Submission

A real form needs to submit data without reloading the page, manage loading state, and reset afterward. The Composition API plus a few directives make this clean.

Stop the Page Reload

By default a form submit reloads the page. The .prevent modifier on @submit calls preventDefault() so you can handle it in JavaScript.

<form @submit.prevent="onSubmit">
  <button type="submit">Send</button>
</form>

A Reactive Form Object

Group related fields into one reactive object. Each input uses v-model on a property of that object.

<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
</script>

<template>
  <input v-model="form.name" />
  <input v-model="form.email" />
</template>

The Submit Handler

The handler reads the reactive form and sends it. Because it is .prevented, the page stays put.

<script setup>
async function onSubmit() {
  await fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify(form)
  })
}
</script>

Tracking Loading State

Add a loading ref so the UI can react while the request is in flight. Set it true before the request and false after.

<script setup>
import { ref, reactive } from 'vue'
const loading = ref(false)
const form = reactive({ name: '' })
</script>

Disabling the Button During Submit

Bind :disabled to loading so users cannot double-submit. Toggle loading around the async call.

<script setup>
async function onSubmit() {
  loading.value = true
  try { await save() } finally { loading.value = false }
}
</script>

<template>
  <button type="submit" :disabled="loading">Send</button>
</template>

Showing Submission Feedback

Use the loading flag to swap button text or show a spinner, giving users clear feedback that something is happening.

<template>
  <button :disabled="loading">
    {{ loading ? 'Sending...' : 'Send' }}
  </button>
</template>

Resetting the Form

To clear the form, reassign each field to its initial value. Keep an initial snapshot so reset is reliable.

<script setup>
import { reactive } from 'vue'
const initial = { name: '', email: '' }
const form = reactive({ ...initial })
function reset() { Object.assign(form, initial) }
</script>

Reset After a Successful Submit

Call reset once the request succeeds so the user can enter the next entry from a clean slate.

<script setup>
async function onSubmit() {
  loading.value = true
  try {
    await save()
    reset()
  } finally { loading.value = false }
}
</script>

Putting It All Together

A complete pattern: prevent reload, reactive form, loading guard, disabled button, and reset on success — the backbone of most Vue forms.

Why try/finally

Wrapping the async work in try/finally ensures loading is reset even if the request throws. Otherwise a failed submit could leave the button permanently disabled.

Quick Check

Test your submission knowledge.

Recap

Form submission essentials:

@submit.prevent stops the page reload.
Group fields in a reactive object bound with v-model.
Track a loading ref and bind :disabled to it.
Reset by reassigning fields to initial values, ideally on success.
Use try/finally so loading always resets.

Frequently asked questions

Is the “Form Submission and Reset” lesson free?

Yes — the full text of “Form Submission and Reset” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Form Submission and Reset”?

@submit.prevent, FormData, resetting form state, disabling submit during loading. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Form Submission and Reset” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy