Vue Academy · Ders

Form Gönderme ve Sıfırlama

@submit.prevent, FormData, form durumunu sıfırlama, yükleme sırasında gönderme işlemini devre dışı bırakma.

Form Gönderme ve Sıfırlama, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Form Gönderimini Yönetme

Gerçek bir formun sayfayı yeniden yüklemeden veri göndermesi, yüklenme durumunu yönetmesi ve sonrasında sıfırlanması gerekir. Composition API ve birkaç yönerge bunu temiz bir şekilde yapmanızı sağlar.

Sayfanın Yeniden Yüklenmesini Durdurma

Varsayılan olarak bir form gönderimi sayfayı yeniden yükler. @submit üzerindeki .prevent değiştiricisi, preventDefault() çağrısı yaparak bunu JavaScript içinde yönetmenizi sağlar.

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

Reaktif Bir Form Nesnesi

İlişkili alanları tek bir reaktif nesnede gruplayın. Her giriş, o nesnenin bir özelliği üzerinde v-model kullanır.

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

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

Gönderim İşleyicisi

İşleyici reaktif formu okur ve gönderir. .prevent kullanıldığı için sayfa aynı yerde kalır.

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

Yüklenme Durumunu İzleme

İstek sürerken kullanıcı arayüzünün tepki verebilmesi için bir loading ref'i ekleyin. İstekten önce true, istekten sonra false olarak ayarlayın.

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

Gönderim Sırasında Düğmeyi Devre Dışı Bırakma

Kullanıcıların formu iki kez göndermesini önlemek için :disabled özelliğini loading'e bağlayın. Eşzamansız çağrının çevresinde loading değerini değiştirin.

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

Gönderim Geri Bildirimini Gösterme

Bir şeylerin gerçekleştiğini kullanıcıya açıkça göstermek için loading işaretini düğme metnini değiştirmek veya bir yükleniyor simgesi göstermek üzere kullanın.

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

Formu Sıfırlama

Formu temizlemek için her alanı başlangıç değerine yeniden atayın. Sıfırlamanın güvenilir olması için başlangıçtaki bir kopyayı saklayın.

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

Başarılı Gönderimden Sonra Sıfırlama

İstek başarıyla tamamlandıktan sonra reset çağırın; böylece kullanıcı sonraki girdiyi temiz bir başlangıçla girebilir.

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

Hepsini Bir Araya Getirme

Tam bir yaklaşım: yeniden yüklemeyi engelleme, tepkisel form, yükleme koruması, devre dışı düğme ve başarı durumunda sıfırlama — çoğu Vue formunun temel dayanağıdır.

try/finally Neden Kullanılır

Eşzamansız işlemi try/finally içine almak, istek hata verse bile loading değerinin sıfırlanmasını garanti eder. Aksi takdirde başarısız bir gönderim, düğmeyi kalıcı olarak devre dışı bırakabilir.

Hızlı Kontrol

Gönderim bilginizi sınayın.

Özet

Form gönderiminin temelleri:

@submit.prevent sayfanın yeniden yüklenmesini durdurur.
Alanları v-model ile bağlanmış tepkisel bir nesnede gruplayın.
Bir loading ref'ini izleyin ve :disabled özniteliğini buna bağlayın.
Alanları başlangıç değerlerine yeniden atayarak, ideal olarak başarı durumunda sıfırlayın.
Yüklemenin her zaman sıfırlanması için try/finally kullanın.

Sıkça Sorulan Sorular

“Form Gönderme ve Sıfırlama” dersi ücretsiz mi?

Evet — “Form Gönderme ve Sıfırlama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Form Gönderme ve Sıfırlama” dersinde ne öğreneceğim?

@submit.prevent, FormData, form durumunu sıfırlama, yükleme sırasında gönderme işlemini devre dışı bırakma. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Form Gönderme ve Sıfırlama” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Vue Academy Sayfasına Dön