ربط إدخالات النموذج ​

عند التعامل مع النماذج في الواجهة الأمامية، عادة ما نحتاج إلى مزامنة حالة عناصر إدخال النموذج مع الحالة المطابقة في شيفرة الـJavaScript. قد يكون مزعجًا ربط الاتصال يدويًا بين القيم و متغيرات مستمعي أحداث الإدخال:

<input
  :value="text"
  @input="event => text = event.target.value">

السمة الموجهة v-model تساعدنا على تبسيط الشيفرة السابقة إلى:

<input v-model="text">

على غرار ذلك، يمكن استخدام v-model على عناصر <input> من أنواع مختلفة، <textarea> ، و <select> . يوسع تلقائيًا إلى مختلف خاصيات وأحداث الـDOM بناءً على العنصر الذي يُستخدم عليه :

• <input> مع أنواع النصوص وعناصر <textarea> تستخدم خاصية value وحدث input؛
• <input type="checkbox"> و <input type="radio"> تستخدم خاصية checked وحدث change؛
• <select> تستخدم value كخاصية و change كحدث.

الاستخدام الأساسي ​

النص ​

<p>الرسالة: {{ message }}</p>
<input v-model="message" placeholder="حرر رسالة" />

النص متعدد السطور ​

<span>رسالة متعددة السطور :</span>
  <p style="white-space: pre-line;">{{ multilineText }}</p>
  <textarea v-model="message" placeholder="إضافة سطور متعددة"></textarea>

تجدر الملاحظة أن الاقحام النصي داخل <textarea> لن يعمل. استخدم v-model بدلاً من ذلك.

<!-- سيء -->
<textarea>{{ text }}</textarea>

<!-- جيد -->
<textarea v-model="text"></textarea>

خانة الاختيار ​

خانة اختيار وحيدة يعني ربطها مع قيمة منطقية واحدة :

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

يمكننا أيضًا ربط عدة خانات اختيار مع قيمة مصفوفة أو Set :

const checkedNames = ref([])

export default {
    data() {
        return {
            checkedNames: []
        }
    }
}

<div>الأسماء المحددة: {{ checkedNames }}</div>

<input type="checkbox" id="عبد العزيز" value="عبد العزيز" v-model="checkedNames">
<label for="عبد العزيز">عبد العزيز</label>

<input type="checkbox" id="ابراهيم" value="ابراهيم" v-model="checkedNames">
<label for="ابراهيم">ابراهيم</label>

<input type="checkbox" id="واثق" value="واثق" v-model="checkedNames">
<label for="واثق">واثق</label>

في هذه الحالة ، ستحتوي مصفوفة الـcheckedNames دائمًا على قيم خانات الاختيار المحددة.

زر الانتقاء ​

<div>Picked: {{ picked }}</div>

<input type="radio" id="واحد" value="واحد" v-model="picked" />
<label for="واحد">واحد</label>

<input type="radio" id="اثنان" value="اثنان" v-model="picked" />
<label for="اثنان">اثنان</label>

القائمة المنسدلة ​

اختيار واحد:

<div>محدد: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">حدد خيارا</option>
  <option>أ</option>
  <option>ب</option>
  <option>ج</option>
</select>

اختيارات متعددة (مربوطة بمصفوفة):

<div>محدد: {{ multiSelected }}</div>
  <select v-model="multiSelected" multiple>
    <option disabled value="">حدد خيارا</option>
    <option>أ</option>
    <option>ب</option>
    <option>ج</option>
  </select>

خيارات المنسدلة يمكن تصييرها بشكل ديناميكي باستخدام v-for :

const selected = ref('A')

const options = ref([
  { text: "واحد",  value: "أ", },
  { text: "اثنان", value: "ب" },
  { text: "ثلاثة", value: "ج" },
]);

export default {
    data() {
        return {
            selected: 'A',
            options: [
                    { text: "واحد",  value: "أ", },
                    { text: "اثنان", value: "ب" },
                    { text: "ثلاثة", value: "ج" },
                   ]
        }
    }
}

<select v-model="selected">
  <option v-for="option in options" :key="option.value" :value="option.value">
    {{ option.text }}
  </option>
</select>

<div>محدد: {{ selected }}</div>

ربط القيم ​

بالنسبة لزر الانتقاء ، وخيارات خانة الاختيار والمنسدلة ، فإن قيم الربط v-model عادة ما تكون سلاسل ثابتة (أو قيم منطقية لخانة الاختيار):

<!-- `picked` هو سلسلة نصية "أ" عند الاختيار -->
<input type="radio" v-model="picked" value="أ" />

<!-- `toggle` هو إما صحيح أو خاطئ -->
<input type="checkbox" v-model="toggle" />

<!-- `selected` هو سلسلة نصية "أ ب ج" عند اختيار الخيار الأول -->
<select v-model="selected">
  <option value="أ ب ج">أ ب ج</option>
</select>

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

خانة الاختيار ​

<input
  type="checkbox"
  v-model="toggle"
  true-value="نعم"
  false-value="لا" />

true-value و false-value هي سمات مخصصة لـ Vue التي تعمل فقط مع v-model . هنا سيتم تعيين قيمة خاصية toggle إلى 'نعم' عند تحديد الخانة ، وتعيينها إلى 'لا' عند إلغاء التحديد. يمكنك أيضًا ربطهم بقيم ديناميكية باستخدام v-bind :

<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

زر الانتقاء ​

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

pick سيُعيَّن بقيمة first عند تحديد إدخال الزر الأول ، وتعيينه إلى قيمة second عند تحديد الثاني.

خيارات القائمة المنسدلة ​

<select v-model="selected">
  <!--  كائن مضمن سطريا -->
  <option :value="{ number: 123 }">123</option>
</select>

v-model تدعم أيضًا ربط بالقيم غير السلاسل النصية! في المثال أعلاه ، عند تحديد الخيار ، سيتم تعيين selected إلى قيمة كائنية مجردة { number: 123 } .

المُعدِّلات ​

المُعدِّل .lazy ​

افتراضيا، v-model تزامن الإدخال مع البيانات بعد كل حدث input (باستثناء تركيب IME كما وصف أعلاه). يمكنك إضافة المعدل lazy للمزامنة بعد الانتهاء من الكتابة و مغادرة إطار الإدخال أي بعد حدث change:

<!-- مزامنة بعد "change" بدلاً من "input" -->
<input v-model.lazy="msg" />

المُعدِّل .number ​

إذا كنت ترغب في تحويل إدخال المستخدم إلى عدد تلقائيًا ، يمكنك إضافة المعدل number إلى الإدخالات المُوجهة بـv-model :

<input v-model.number="age" />

إذا لم تُحلّل القيمة باستخدام parseFloat() ، فستُستخدام القيمة الأصلية بدلاً من ذلك.

المُعدِّل number يُطبَّق تلقائيًا إذا كان الإدخال لديه السمة type="number" .

المُعدِّل .trim ​

إذا كنت ترغب في التخلص من المسافات الفارغة من إدخال المستخدم تلقائيًا، يمكنك إضافة المُعدِّل trim إلى الإدخالات الموجهة بـv-model :

<input v-model.trim="msg" />

v-model مع المكونات ​

إذا لم تكن معتادًا على مكونات Vue ، يمكنك تخطي هذا القسم في الوقت الحالي.

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