Vue Academy · Pelajaran

Pengiriman dan Pengaturan Ulang Formulir

@submit.prevent, FormData, mengatur ulang state formulir, menonaktifkan pengiriman saat memuat.

Pengiriman dan Pengaturan Ulang Formulir adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Menangani Pengiriman form

form nyata perlu mengirim data tanpa memuat ulang halaman, mengelola status loading, lalu mengatur ulang setelahnya. API Komposisi bersama beberapa direktif membuatnya tetap rapi.

stop Memuat Ulang Halaman

Secara bawaan, pengiriman form akan memuat ulang halaman. Pengubah .prevent pada @submit memanggil preventDefault(), sehingga Anda dapat menanganinya dalam JavaScript.

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

Objek form Reaktif

Kelompokkan bidang yang berkaitan ke dalam satu objek reaktif. Setiap input menggunakan v-model pada properti objek tersebut.

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

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

Fungsi Penanganan Pengiriman

Fungsi penanganan membaca form reaktif lalu mengirimkannya. Karena menggunakan .prevent, halaman tetap berada di tempatnya.

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

Melacak Status loading

Tambahkan referensi loading agar antarmuka dapat merespons saat permintaan sedang diproses. Setel ke nilai benar sebelum permintaan dan ke nilai salah setelahnya.

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

Menonaktifkan Tombol Selama Pengiriman

Ikat :disabled ke loading agar pengguna tidak dapat mengirim dua kali. Ubah nilai loading sebelum dan sesudah pemanggilan asinkron.

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

Menampilkan Umpan Balik Pengiriman

Gunakan penanda loading untuk mengganti teks tombol atau menampilkan indikator pemuatan, sehingga pengguna mendapat informasi yang jelas bahwa sesuatu sedang berlangsung.

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

Mengatur Ulang form

Untuk mengosongkan formulir, tetapkan kembali setiap bidang ke nilai awalnya. Simpan snapshot awal agar pengaturan ulang dapat diandalkan.

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

Mengatur Ulang Setelah Pengiriman Berhasil

Panggil reset setelah permintaan berhasil agar pengguna dapat memasukkan entri berikutnya dari kondisi awal yang bersih.

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

Menyatukan Semuanya

Pola lengkap: cegah pemuatan ulang, formulir reaktif, pengaman pemuatan, tombol nonaktif, dan pengaturan ulang saat berhasil — fondasi sebagian besar formulir Vue.

Mengapa Menggunakan try/finally

Membungkus pekerjaan asinkron dalam try/finally memastikan loading diatur ulang meskipun permintaan menimbulkan kesalahan. Jika tidak, pengiriman yang gagal dapat membuat tombol terus-menerus nonaktif.

Pemeriksaan Singkat

Uji pengetahuan Anda tentang pengiriman.

Ringkasan

Hal-hal penting dalam pengiriman formulir:

@submit.prevent menghentikan pemuatan ulang halaman.
Kelompokkan bidang dalam objek reaktif yang diikat dengan v-model.
Lacak ref loading dan ikat :disabled padanya.
Lakukan pengaturan ulang dengan menetapkan kembali bidang ke nilai awal, idealnya saat berhasil.
Gunakan try/finally agar loading selalu diatur ulang.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pengiriman dan Pengaturan Ulang Formulir” gratis?

Ya — teks lengkap “Pengiriman dan Pengaturan Ulang Formulir” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pengiriman dan Pengaturan Ulang Formulir”?

@submit.prevent, FormData, mengatur ulang state formulir, menonaktifkan pengiriman saat memuat. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Pengiriman dan Pengaturan Ulang Formulir” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

v-model pada Semua Elemen Formulir
Pengiriman dan Pengaturan Ulang Formulir
Pola Validasi Manual
VeeValidate untuk Validasi Berbasis Skema

← Kembali ke Vue Academy