7. المشروع [vuejs-05]: التوجيه [v-for]

يحتوي المشروع [vuejs-05] على التوجيه [v-for]:

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

كود البرنامج النصي الرئيسي [main.js] مطابق لكود البرنامج النصي [main.js] في المشاريع السابقة.

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

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

<template>
  <b-container>
    <b-card>
      <b-alert show variant="success" align="center">
        <h4>[vuejs-05] : attribut [v-for]</h4>
      </b-alert>
      <VFor />
    </b-card>
  </b-container>
</template>


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

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

• الأسطر 7 و14 و19: يستخدم المكون [App] المكون [VFor]؛

7.3. المكون [VFor]

سيكون العرض المرئي كما يلي:

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

<template>
  <div>
    <!-- قائمة منسدلة -->
    <b-dropdown id="dropdown" text="Options">
      <b-dropdown-item v-for="(option,index) in options"
                       :key="option.id"
                       @click="select(index)">{{option.text}}</b-dropdown-item>
    </b-dropdown>
    <!-- زر -->
    <b-button class="ml-3"
              variant="primary"
              @click="generateErrors"
              v-if="!error">Générer une liste d'erreurs</b-button>
    <!-- تنبيه -->
    <b-alert show variant="danger" v-if="error" class="mt-3">
      Les erreurs suivantes se sont produites :
      <br />
      <ul>
        <li v-for="(erreur,index) in erreurs" :key="index">{{erreur}}</li>
      </ul>
    </b-alert>
  </div>
</template>
<!-- نص برمجي -->
<script>
  export default {
    name: "VFor",

    // الخصائص الثابتة للمكون
    data() {
      return {
        // قائمة الأخطاء
        erreurs: [],
        // خطأ أم لا
        error: false,
        // قائمة خيارات القائمة
        options: [
          { text: "option 1", id: 1 },
          { text: "option 2", id: 2 },
          { text: "option 3", id: 3 }
        ]
      };
    },

    // الأساليب
    methods: {
      // إنشاء قائمة بالأخطاء
      generateErrors() {
        this.erreurs = ["erreur 1", "erreur 2", "erreur 3"];
        this.error = true;
      },
      // اختار المستخدم خيارًا
      select(index) {
        alert("Vous avez choisi : " + this.options[index].text);
      }
    }
  };
</script>

تعليقات

• السطر 4: تُستخدم العلامة <b-dropdown> لتعريف قائمة منسدلة [1] على شكل زر يُضغط عليه لعرض خيارات القائمة [2]. يحدد [text=’Options’] النص المعروض على الزر [1]؛
• الأسطر 5-7: العلامة <dropdown-item> تُحدد عنصرًا من القائمة المنسدلة؛
• السطر 5: يشير السمة [v-for] إلى أنه يجب تكرار العلامة <dropdown-item> لكل عنصر [option] في السمة [options]، الأسطر 37-41، في المكون. يمثل [index] رقم العنصر في القائمة [0, 1, ..., n]. يمكن اختيار اسم العنصر [option] واسم الفهرس بحرية. كان من الممكن كتابة [<b-dropdown-item v-for="(o,i) in options" :key="o.id" @click="select(i)">{{o.text}}</b-dropdown-item>]؛
• السطر 6: إذا تم نسيان السمة [key]، فإن ESLint يصدر تحذيرًا. يجب أن تظل قيمة السمة [key] ثابتة بمرور الوقت. لذلك فإن قيمة العنصر [index] غير مناسبة. لأنه في حالة حذف هذا العنصر، ستنخفض قيم [index] للعناصر التي تليه في القائمة بمقدار 1. ولذلك، يتم هنا اتخاذ القيمة [option.id] كقيمة للمفتاح، في الأسطر 38-40، والتي لن تتغير في حالة حذف أي عنصر. السمة [key] هي عنصر لتحسين إعادة إنشاء DOM (نموذج كائن المستند) بواسطة [Vue.js] عندما يتعين إعادة إنشاء القائمة. لاحظ الترميز [:key]، لأن [key] له قيمة ديناميكية؛
• السطر 7: سيتم استدعاء الأسلوب [select(index)]، الأسطر 49-51، عندما ينقر المستخدم على عنصر من عناصر القائمة؛
• السطر 7: سيكون نص الخيار هو القيمة [option.text] المحددة في الأسطر 37-41؛
• السطر 10: الزر [3]. [class=’ml-3] تعني هامش (m) يسار (l) بثلاثة فواصل. تشير [@click="generateErrors"] إلى أن الطريقة [generateErrors]، الأسطر 45-48، سيتم تنفيذها عند النقر على الزر. يشير الرمز [v-if="!error"] إلى أن عرض الزر يتوقف على قيمة السمة الثابتة [error] في السطر 35؛
• الأسطر 15-21: تنبيه من النوع [danger] [4] يتم التحكم فيه أيضًا بواسطة السمة الثابتة [error] في السطر 35. يحدد السمة [class=’mt-3’] (margin top 3 spacers) المسافة بين هذا التنبيه والعنصر الموجود فوقه؛
• السطر 27: العلامة HTML <br /> تُحدث فاصلًا بين الأسطر؛
• السطر 18: بداية قائمة غير مرتبة [ul=unordered list]؛
• السطر 19: العلامة <li> تُحدد عنصرًا في القائمة <ul>. وهنا أيضًا، نستخدم توجيهًا [v-for] لتوليد العلامة عدة مرات. ويتم تكرارها هنا بعدد العناصر الموجودة في الجدول [erreurs] في السطر 33. ويُستخدم هنا السمة [:key=index]. سبق أن ذكرنا أن فهرس عناصر القائمة لا يُعد معيارًا جيدًا للتمييز بين عناصر القائمة، لأنه في حالة حذف عنصر ما، يتغير فهرس جميع العناصر التي تليه. لا يهم ذلك هنا لأن عناصر قائمة الأخطاء غير قابلة للحذف؛
• السطر 19: يُستخدم هذا العنصر لعرض العنصر [erreur] من القائمة [erreurs]؛
• الأسطر 30-43: جميع العناصر الديناميكية في [template] هي سمات للمكون. لا توجد هنا أي خاصية من نوع [props] يتم تحديد قيمتها بواسطة المكون الأصلي؛
• الأسطر 48-55: تُنشئ الطريقة [generateErrors] قائمة الأخطاء التي سيتم عرضها بواسطة العلامة <ul> في الأسطر 16-18. بالإضافة إلى ذلك، تقوم بتعديل السمة الثابتة [error]، وذلك لعرض قائمة الأخطاء هذه (السطر 15) وإخفاء زر الإنشاء (السطر 13)؛

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