Vue Academy · 课时

表单提交与重置

Q: 「表单提交与重置」这节课中我会学到什么？

@submit.prevent、FormData、重置表单状态，以及加载期间禁用提交。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

@submit.prevent、FormData、重置表单状态，以及加载期间禁用提交。

表单提交与重置 是 CoddyKit 上的免费 Vue Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

处理表单提交

真正的表单需要在不重新加载页面的情况下提交数据、管理加载状态，并在之后重置。组合式 API 加上几个指令，就能简洁地完成这些工作。

阻止页面重新加载

默认情况下，提交表单会重新加载页面。@submit 上的 .prevent 修饰符会调用 preventDefault()，这样您就可以在 JavaScript 中处理提交。

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

响应式表单对象

将相关字段分组到一个响应式对象中。每个输入框都对应该对象的一个属性使用 v-model。

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

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

提交处理函数

处理函数会读取响应式表单并发送数据。由于它使用了 .prevent，页面会保持原样。

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

跟踪加载状态

添加一个 loading 引用，让界面能够在请求进行期间做出响应。请在请求前将它设为 true，在请求后设为 false。

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

提交期间禁用按钮

将 :disabled 绑定到 loading，这样用户就无法重复提交。请在异步调用前后切换 loading 的值。

<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>

显示提交反馈

使用加载标志切换按钮文本或显示加载指示器，让用户清楚地知道操作正在进行。

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

重置表单

要清空 form，请将每个字段重新赋值为其 initial 值。请保留一份 initial 快照，以确保重置可靠。

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

成功提交后重置

请求成功后调用 reset，这样用户就可以从干净的状态开始输入下一条内容。

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

整合应用

一个完整的模式：阻止重新加载、使用响应式表单、添加加载保护、禁用按钮，并在成功后重置——这是大多数 Vue 表单的基础。

为何使用 try/finally

将异步操作包裹在 try/finally 中，可以确保即使请求抛出异常，也会重置 loading。否则，提交失败可能会让按钮永久保持禁用状态。

快速检查

测试您对提交操作的了解。

回顾

表单提交要点：

@submit.prevent 会阻止页面重新加载。
将字段组合到一个通过 v-model 绑定的响应式对象中。
跟踪一个 loading ref，并将 :disabled 绑定到它。
通过将字段重新赋值为 initial 值来重置，最好在成功后执行。
使用 try/finally，确保 loading 始终会被重置。

常见问题解答

「表单提交与重置」课时是免费的吗？

是的 — 「表单提交与重置」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「表单提交与重置」这节课中我会学到什么？

@submit.prevent、FormData、重置表单状态，以及加载期间禁用提交。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「表单提交与重置」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy