الخاصية v-model

v-model هو من خصائص vue ويتم استخدامه كالتالي:

هو عنصر يربط البيانات بين المدخلات التي تريد ادخالها وبين المتغير الذي تحفظ فيه المتغيرات مثل الان عندما تكتب اي حرف في صندوق ال Input هذا يتم حفظه في المتغير email:

data() {
  return {
    email: ''
  }
}

هذا المصطلح مشهور جدا في عالم الواجهات الأمامية two way binding او بالعربي الربط الثنائي وهو كالتالي:

عندما يتغير المتغير في الكود يتغير محتوى واجهة المستخدم أو عندما يقوم المستخدم بتغيير قيمة في واجهة المستخدم، يتم تحديث المتغير في الكود مباشرة مثال:

يمكن استخدامه في اظهار رسالة خطأ مثلا عندما لا يقوم بادخال المستخدم مدخلات صحيحة .

في الواقع يتم استخدامه كثير وفي كثير من الاماكن لكن هذا كان مثالا عليه.

الخاصية v-model في Vue تستخدم لربط البيانات بين واجهة المستخدم والمكون بشكل ثنائي الاتجاه (Two-way binding).

فهنا v-model تقوم بربط قيمة حقل الإدخال <input> بالمتغير email الموجود في البيانات (data) داخل مكون Vue.أى عندما يقوم المستخدم بكتابة شيئ داخل الحقل تتغير قيمة email تلقائيا في البيانات.

وإذا قمت بتعديل ال email في الكود داخل المكون فإن قيمة الحقل في الصفحة ستتغير تلقائيا لتظهر في الحقل.

فمثلا لنفرض الكود التالي :

<div id="app">
  <label>Email:</label>
  <input v-model="email" type="email">
  <p>Email That User Enter: {{ email }}</p>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      email: ''
    }
  }
});

app.mount('#app');
</script>

فهنا كلما قام المستخدم بكتابة أى شئ في الحقل يتم تحديث email تلقائيا .و{{ email }} تقوم بعرض القيمة في الصفحة مباشرة مما يجعل التحديث يظهر مباشرة في الصفحة كلما قان المستخدم بكتابة شئ.

الخلاصة أن v-model="email" تجعل <input> و المتغير email متصلين ببعض إذا تغير أحدهما يتغير الآخر بشكل تلقائي.

السلام عليكم ورحمة الله تعالى وبركاته،

الخاصية v-model في Vue.js تقوم بإنشاء ربط ثنائي الاتجاه (two-way data binding) بين حقل الإدخال input والمتغير email في بيانات المكون وهذا يعني أن أي تغيير يحدث في قيمة حقل الإدخال سيتم تحديثه تلقائيا في المتغير email، وفي المقابل أي تغيير يحدث في قيمة المتغير email في الكود سيظهر مباشرة في حقل الإدخال.

وعمليا فإن:

v-model="email"

هي اختصار للكتابة:

value="email"

و:

@input="email = $event.target.value"

مما يجعل إدارة البيانات أسهل وأكثر فعالية دون الحاجة لكتابة كود إضافي للتعامل مع الأحداث وتحديث البيانات يدويا.

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

أولاً لدينا الكائن user يحمل الخاصية email و password 

new Vue({
  el: '#app',
  data: {
    user: {
      email: '',
      password: ''
    },
  },

});

ونريد عندما يكتب المستخدم بريده الإلكتروني أو كلمة المرور في الحقول، تتحدث قيم this.user.email و this.user.password تلقائيًا في بيانات Vue نستخدم v-model كالتالي

<div id="app">
  <form @submit.prevent="login">
    <label for="email">البريد الإلكتروني:</label>
    <input v-model="user.email" type="email" id="email" required>

    <label for="password">كلمة المرور:</label>
    <input v-model="user.password" type="password" id="password" required>

    <button type="submit">تسجيل الدخول</button>
  </form>
</div>