نماذج Vue.js وربط الإدخال

تُعد النماذج جزءًا أساسيًا من تطبيقات الويب، حيث تسمح للمستخدمين بإدخال البيانات وإرسالها. يعمل Vue.js على تبسيط التعامل مع النماذج وربط الإدخال من خلال توفير طريقة بديهية لإدارة إدخال المستخدم ومزامنته مع بيانات التطبيق. سترشدك هذه المقالة خلال أساسيات العمل مع النماذج وربط الإدخال في Vue.js.

أساسيات ربط الإدخال

في Vue.js، يتم تحقيق ربط البيانات ثنائي الاتجاه لمدخلات النموذج باستخدام التوجيه v-model. يربط هذا التوجيه قيمة عنصر الإدخال بخاصية بيانات، مما يضمن انعكاس أي تغييرات على الإدخال في البيانات والعكس صحيح.

<template>
  <div>
    <input v-model="message" placeholder="Type something"/>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

في هذا المثال، يربط التوجيه v-model قيمة حقل الإدخال بخاصية البيانات message. ينعكس أي نص يتم إدخاله في حقل الإدخال على الفور في خاصية message ويتم عرضه في الفقرة.

العمل مع أنواع الإدخال المختلفة

يعمل التوجيه v-model مع أنواع مختلفة من الإدخال، بما في ذلك حقول النص ومربعات الاختيار وأزرار الاختيار والقوائم المنسدلة للاختيار. فيما يلي كيفية استخدام v-model مع أنواع مختلفة من الإدخال:

إدخال النص:<input type="text" v-model="text" />
مربع الاختيار: <input type="checkbox" v-model="checked" />
أزرار الاختيار:<input type="radio" v-model="selected" value="option1" />
حدد القائمة المنسدلة:<select v-model="selected"> <option value="option1">Option 1</option> </select>

التعامل مع نموذج الإرسال

للتعامل مع عمليات إرسال النماذج، يمكنك استخدام مستمع الحدث @submit على عنصر <form>. فيما يلي مثال بسيط لكيفية التعامل مع عملية إرسال النماذج في Vue.js:

<template>
  <form @submit.prevent="submitForm">
    <input v-model="username" placeholder="Enter your username"/>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    };
  },
  methods: {
    submitForm() {
      alert('Form submitted with username: ' + this.username);
    }
  }
};
</script>

في هذا المثال، يستمع التوجيه @submit.prevent إلى حدث إرسال النموذج ويمنع الإجراء الافتراضي. يتم استدعاء طريقة submitForm، والتي تعرض تنبيهًا باسم المستخدم المرسل.

استخدام التحقق من صحة النموذج

يعد التحقق من صحة مدخلات النماذج جزءًا أساسيًا من التعامل مع النماذج. ورغم أن Vue.js لا يوفر التحقق المدمج، يمكنك استخدام طرق مخصصة أو مكتبات تابعة لجهات خارجية مثل VeeValidate للتعامل مع التحقق. فيما يلي مثال أساسي لكيفية تنفيذ طريقة تحقق بسيطة:

<template>
  <form @submit.prevent="validateForm">
    <input v-model="email" placeholder="Enter your email"/>
    <span v-if="!isEmailValid">Invalid email address</span>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      isEmailValid: true
    };
  },
  methods: {
    validateForm() {
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      this.isEmailValid = emailPattern.test(this.email);
      if (this.isEmailValid) {
        alert('Form submitted with email: ' + this.email);
      }
    }
  }
};
</script>

في هذا المثال، تتحقق طريقة validateForm مما إذا كان عنوان البريد الإلكتروني يتطابق مع نمط تعبير عادي. إذا كان البريد الإلكتروني صالحًا، فإنه يرسل النموذج؛ وإلا، فإنه يعرض رسالة خطأ.

خاتمة

إن فهم نماذج Vue.js وربط الإدخالات أمر بالغ الأهمية لبناء تطبيقات ويب تفاعلية تعتمد على البيانات. من خلال الاستفادة من التوجيه v-model والتعامل مع عمليات إرسال النماذج، يمكنك إدارة إدخال المستخدم بكفاءة وإنشاء نماذج ديناميكية. باستخدام هذه التقنيات، ستكون مجهزًا جيدًا للتعامل مع مجموعة متنوعة من المهام المتعلقة بالنماذج في تطبيقات Vue.js الخاصة بك.

النماذج الإدخال vuejs النموذج الربط التحقق الإرسال مربع الاختيار الراديو التحديد المعالج الأحداث الأساليب التفاعل