Vue Academy · درس

إرسال النماذج وإعادة ضبطها

‏@submit.prevent وFormData وإعادة ضبط حالة النموذج وتعطيل الإرسال أثناء التحميل

إرسال النماذج وإعادة ضبطها درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 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>

إعادة ضبط النموذج

لإفراغ النموذج، أعد تعيين قيمة كل حقل إلى قيمته الأولية. احتفظ بلقطة أولية لضمان موثوقية إعادة الضبط.

<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.
تتبّع ref باسم loading واربط الخاصية :disabled به.
أعد الضبط بإعادة تعيين الحقول إلى قيمها الأولية، ويفضّل تنفيذ ذلك عند النجاح.
استخدم try/finally لضمان إعادة ضبط حالة التحميل دائمًا.

الأسئلة الشائعة

هل درس «إرسال النماذج وإعادة ضبطها» مجاني؟

نعم — نص درس «إرسال النماذج وإعادة ضبطها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «إرسال النماذج وإعادة ضبطها»؟

‏@submit.prevent وFormData وإعادة ضبط حالة النموذج وتعطيل الإرسال أثناء التحميل تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «إرسال النماذج وإعادة ضبطها»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy