การส่งและรีเซ็ตฟอร์ม
@submit.prevent, FormData การรีเซ็ตสถานะฟอร์ม และการปิดใช้งานการส่งระหว่างโหลด
การส่งและรีเซ็ตฟอร์ม เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
การจัดการการส่งแบบฟอร์ม
แบบฟอร์มจริงจำเป็นต้องส่งข้อมูลโดยไม่โหลดหน้าเว็บใหม่ จัดการสถานะการโหลด และรีเซ็ตในภายหลัง Composition API และคำสั่งไม่กี่ตัวช่วยให้ทำสิ่งนี้ได้อย่างเป็นระเบียบ
หยุดการโหลดหน้าเว็บใหม่
ตามค่าเริ่มต้น การส่งแบบฟอร์มจะโหลดหน้าเว็บใหม่ ตัวปรับค่า .prevent บน @submit จะเรียกใช้ 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 เมื่อคำขอสำเร็จ เพื่อให้ผู้ใช้ป้อนรายการถัดไปใน form ที่สะอาดพร้อมใช้งาน
<script setup>
async function onSubmit() {
loading.value = true
try {
await save()
reset()
} finally { loading.value = false }
}
</script>นำทุกส่วนมารวมกัน
รูปแบบที่สมบูรณ์: ป้องกันการโหลดซ้ำ, form แบบรีแอกทีฟ, ตัวป้องกันระหว่างโหลด, ปุ่มที่ปิดใช้งาน และรีเซ็ตเมื่อสำเร็จ ซึ่งเป็นโครงสร้างหลักของ form ของวิวส่วนใหญ่
เหตุผลที่ใช้ try/finally
การห่อหุ้มงานแบบอะซิงก์ด้วย try/finally ทำให้แน่ใจว่า loading จะถูกรีเซ็ตแม้คำขอจะทำให้เกิดข้อผิดพลาด หากไม่ทำเช่นนั้น การส่งที่ล้มเหลวอาจทำให้ปุ่มถูกปิดใช้งานอย่างถาวร
ตรวจสอบอย่างรวดเร็ว
ทดสอบความรู้เกี่ยวกับการส่ง form ของคุณ
สรุปทบทวน
สาระสำคัญของการส่ง form:
@submit.preventป้องกันไม่ให้หน้าเว็บโหลดซ้ำ- จัดกลุ่มช่องข้อมูลไว้ในออบเจ็กต์แบบรีแอกทีฟที่ผูกด้วย
v-model - ติดตาม ref
loadingและผูก:disabledเข้ากับ ref นี้ - รีเซ็ตโดยกำหนดค่าของช่องข้อมูลกลับเป็นค่า initial โดยควรทำเมื่อสำเร็จ
- ใช้
try/finallyเพื่อให้ loading ถูกรีเซ็ตเสมอ
คำถามที่พบบ่อย
บทเรียน “การส่งและรีเซ็ตฟอร์ม” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การส่งและรีเซ็ตฟอร์ม” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การส่งและรีเซ็ตฟอร์ม”
@submit.prevent, FormData การรีเซ็ตสถานะฟอร์ม และการปิดใช้งานการส่งระหว่างโหลด คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การส่งและรีเซ็ตฟอร์ม” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- v-model บนองค์ประกอบฟอร์มทั้งหมด
- การส่งและรีเซ็ตฟอร์ม
- รูปแบบการตรวจสอบด้วยตนเอง
- VeeValidate สำหรับการตรวจสอบตามสคีมา