6. المشروع [vuejs-04]: توجيهات [v-model, v-bind]، السمات المحسوبة، نموذج الإدخال

هيكل المشروع [vuejs-04] هو كما يلي:

6.1. النص البرمجي الرئيسي [main.js]

وهو نفسه الموجود في المثال السابق.

6.2. المكون الرئيسي [App]

كود [App.vue] هو كما يلي:

<template>
  <b-container>
    <b-card>
      <!-- رسالة التقديم -->
      <b-row>
        <b-col cols="8">
          <b-alert show variant="success" align="center">
            <h4>[vuejs-04] : directives [v-model, v-bind], attributs calculés, formulaire de saisie</h4>
          </b-alert>
        </b-col>
      </b-row>
      <Form />
    </b-card>
  </b-container>
</template>


<script>
  import Form from "./components/Form.vue";

  export default {
    name: "app",
    components: {
      Form
    }
  };
</script>

يستخدم المكون [App.vue] المكون الجديد [Form] (الأسطر 12 و19 و24).

6.3. المكون [Form]

رمز المكون [Form] هو كما يلي:

<template>
  <div>
    <!-- نموذج -->
    <b-form>
      <!-- عناصر النموذج -->
      <b-row>
        <b-col cols="4">
          <b-card bg-variant="light">
            <b-form-group label="Nombre d'enfants à charge" label-for="enfants">
              <b-input type="text"
                       id="enfants"
                       placeholder="Indiquez votre nombre d'enfants"
                       v-model="enfants"
                       v-bind:state="enfantsValide" />
              <b-form-invalid-feedback :state="enfantsValide">Vous devez saisir un nombre positif ou nul</b-form-invalid-feedback>
            </b-form-group>
            <!-- زر -->
            <b-button variant="primary" :disabled="formInvalide" @click="doSomething">Valider</b-button>
          </b-card>
        </b-col>
      </b-row>
    </b-form>
    <b-row class="mt-3">
      <b-col cols="4">
        <b-alert show variant="warning" align="center">
          <h4>enfants= {{enfants}}</h4>
        </b-alert>
      </b-col>
    </b-row>
  </div>
</template>

<!-- نص برمجي -->
<script>
  export default {
    // الاسم
    name: "Form",
    // السمات الثابتة للمكون
    data() {
      return {
        // عدد العناصر التابعة
        enfants: ""
      };
    },

    // السمات المحسوبة
    computed: {
      // السمة [formInvalide]
      formInvalide() {
        return !this.enfantsValide;
      },
      // السمة [enfantsInvalide]
      enfantsValide() {
        return Boolean(this.enfants.match(/^\s*\d+\s*$/));
      }
    },
    // الطرق
    methods: {
      doSomething() {
        // يكون عدد العناصر الفرعية معروفًا عند إجراء التحقق من الصحة
        alert("Nombre d'enfants : " + this.enfants);
      }
    }
  };
</script>

العرض المرئي

تعليقات

• الأسطر 4-32: العلامة <b-form> تُدرج نموذج Bootstrap؛
• السطر 6: العلامة <b-row> تُدرج صفًا في النموذج؛
• السطر 7: العلامة <b-col cols=’4’> تُضيف عمودًا يمتد على 4 أعمدة في Bootstrap؛
• السطر 8: العلامة <b-card> [6] تُدرج بطاقة Bootstrap، وهي منطقة محاطة بإطار؛
• السطر 9: العلامة <b-form-group> تُدرج مجموعة من عناصر النموذج المرتبطة ببعضها البعض. هنا، يرتبط النص (السمة [label]) [1] بحقل إدخال (السمة [label-for]). قيمة [label-for] هي قيمة الحقل [id]، السطر 12، في حقل الإدخال؛
• الأسطر 10-14: العلامة <b-input> [2] تُدرج حقل إدخال:
  • السطر 10: تشير [type=’text’] إلى أنه يمكن كتابة نص في منطقة الإدخال. كان من الممكن كتابة [type=’number’] مع قيود [min=’val1’ max=’val2’ step=’val3’] نظرًا لأننا نتوقع وجود عدد من العناصر التابعة. وقد استخدمنا [type=’text’] لإظهار كيفية التحقق من صحة الإدخال؛
  • السطر 12: تحدد السمة [placeholder] [3] الرسالة المعروضة في منطقة الإدخال طالما لم يقم المستخدم بإدخال أي شيء؛
  • السطر 13: تربط التوجيهية [v-model]، بشكل ثنائي الاتجاه، القيمة المدخلة بالسمة [enfants]، السطر 42، من المكون:
    • عندما تتغير القيمة المدخلة، تتغير قيمة السمة [enfants] أيضًا؛
    • عندما تتغير قيمة السمة [enfants]، تتغير القيمة المدخلة أيضًا، أي يتغير محتوى [2]؛
    • النقطة المهمة التي يجب فهمها هي أنه، بفضل الآلية السابقة، عندما ينقر المستخدم على الزر [Valider] [5]، تكون قيمة السمة [enfants] في السطر 42 هي القيمة التي تم إدخالها في [2]؛
  • السطر 14: تُنشئ التوجيهية [v-bind] ارتباطًا بين سمة لعلامة <b-input> من جهة، وهي هنا السمة [state]، وسمة للمكون من جهة أخرى، وهي هنا [enfantsValide]، في السطر 53. تتميز السمة [enfantsValide] بأنها دالة تُرجع قيمة السمة. يُطلق على هذا النوع من السمات اسم «السمة المحسوبة». توجد السمات المحسوبة في الخاصية [computed]، السطر 47، للمكون. تُستخدم السمات المحسوبة بنفس طريقة استخدام السمات الثابتة في الدالة [data]: فلا نكتب، في السطر 14، [v-bind:state=’enfantsValide()’] بل نكتب [v-bind:state=’enfantsValide’]، بدون الأقواس. كما أنه عند قراءة [template]، لا يمكن التمييز بين السمة المحسوبة والسمة الثابتة. ولذلك، يجب الاطلاع على كود البرنامج النصي للمكون؛
  • السطر 14: ستحدد السمة [state] حالة صحة/عدم صحة القيمة المدخلة: إذا كانت [enfantsValide] تُرجع القيمة [true]، تُعتبر القيمة المدخلة صحيحة، وإلا تُعتبر غير صحيحة. تُظهر لقطة الشاشة أعلاه المكون [b-input] عندما تُرجع الدالة [enfantsValide] القيمة [false]؛
  • السطر 15: تسمح العلامة <b-form-invalid-feedback> [4] بعرض رسالة عندما يكون الإدخال في [2] غير صالح. والسمة الخاصة بها [:state=’enfantsValide’] مطابقة للسمة [v-bind:state=’enfantsValide’] في السطر 14. يمكن حذف التوجيه [v-bind] ولكن يجب الاحتفاظ بالعلامة [:]. وبالتالي، تظهر رسالة الخطأ عندما تكون قيمة السمة [enfantsValide] هي [false]؛
  • السطر 16: نهاية مجموعة العناصر <b-group>؛
  • السطر 18: الزر [5] الذي سيسمح بالتحقق من صحة الإدخال:
    • سيكون لونه أزرق [variant=’primary’]؛
    • [:disabled="formInvalide"]: السمة [disabled] تسمح بتفعيل/إلغاء تفعيل الزر. هذه السمة مرتبطة (v-bind) بالسمة المحسوبة [formInvalide] في السطر 49؛
    • [@click="doSomething"]: عندما ينقر المستخدم على الزر، سيتم تنفيذ الأسلوب [doSomething]، السطر 59؛
  • الأسطر 19-22: إغلاق العلامات المختلفة المفتوحة؛
  • الأسطر 23-29: سطر جديد في [template]. [class=’mt-3’] تعني [margin (m) top (t) égale à 3 spacers]. [spacer] هي وحدة تباعد في Bootstrap. تولد هذه الفئة المسافة [8] في لقطة الشاشة أعلاه. بدون هذه الفئة، تكون المنطقة [7] ملتصقة بالمنطقة [1-6]؛
  • السطر 24: عمود يشغل 4 أعمدة في Bootstrap؛
  • الأسطر 25-27: تنبيه [warning] يعرض قيمة السمة الثابتة [enfants] (السطر 42). ونظرًا لأن هذا السمة له ارتباط ثنائي الاتجاه مع حقل الإدخال، فبمجرد أن يقوم المستخدم بتعديل الحقل، تتغير القيمة المعروضة في التنبيه أيضًا؛
  • الأسطر 34-65: رمز المكون jS؛
  • السطر 42: السمة الثابتة الوحيدة للمكون؛
  • الأسطر 47-56: السمات المحسوبة للمكون؛
  • الأسطر 53-55: يُعتبر الإدخال صحيحًا إذا كان عددًا صحيحًا موجبًا قد يسبقه أو يتبعه «مسافات»؛
  • الأسطر 49-51: يُعتبر النموذج صالحًا إذا كانت قيمة عدد الأطفال التي تم إدخالها صالحة. بشكل عام، يحتوي النموذج على عدة حقول إدخال ويُعتبر صالحًا إذا كانت جميعها صالحة؛
  • الأسطر 58-63: طرق المكون التي تستجيب لأحداثه. هنا، لا يوجد سوى حدث واحد: [click] على الزر. نكتفي بعرض القيمة المدخلة لإثبات أننا نستطيع الوصول إليها بالفعل؛

6.4. تنفيذ المشروع

نقوم بتعديل الملف [package.json] ونقوم بتنفيذ المشروع: