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>
    <!-- a drop-down list -->
    <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>
    <!-- button -->
    <b-button class="ml-3"
              variant="primary"
              @click="generateErrors"
              v-if="!error">Générer une liste d'erreurs</b-button>
    <!-- alert -->
    <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 -->
<script>
  export default {
    name: "VFor",
 
    // propriétés statiques du composant
    data() {
      return {
        // liste des erreurs
        erreurs: [],
        // erreur ou pas
        error: false,
        // liste des options du menu
        options: [
          { text: "option 1", id: 1 },
          { text: "option 2", id: 2 },
          { text: "option 3", id: 3 }
        ]
      };
    },
 
    // méthodes
    methods: {
      // génération d'une liste d'erreurs
      generateErrors() {
        this.erreurs = ["erreur 1", "erreur 2", "erreur 3"];
        this.error = true;
      },
      // l'utilisateur a sélectionné une option
      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] بواسطة [Vue.js] لتحسين إعادة عرض DOM (نموذج كائن المستند) عندما تحتاج القائمة إلى إعادة العرض. لاحظ ترميز [: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’] (هامش علوي 3 فواصل) المسافة بين هذا التنبيه والعنصر الموجود فوقه؛
• السطر 27: علامة HTML <br /> تنشئ فاصل أسطر؛
• السطر 18: بداية قائمة غير مرتبة [ul=قائمة غير مرتبة]؛
• السطر 19: تحدد علامة <li> عنصر قائمة <ul>. هنا مرة أخرى، نستخدم توجيه [v-for] لتوليد العلامة عدة مرات — بقدر عدد العناصر الموجودة في المصفوفة [errors] في السطر 33. نستخدم السمة [:key=index] هنا. ذكرنا سابقًا أن فهرس عناصر القائمة ليس طريقة جيدة للتمييز بين عناصر القائمة لأنه إذا تمت إزالة عنصر، فإن فهارس جميع العناصر اللاحقة تتغير. هنا، لا يهم هذا الأمر لأن العناصر الموجودة في قائمة الأخطاء من غير المرجح أن تتم إزالتها؛
• السطر 19: يُستخدم هذا السطر لعرض عنصر [error] من قائمة [errors]؛
• الأسطر 30–43: جميع العناصر الديناميكية في [template] هي سمات للمكون. لا توجد هنا خصائص [props] يتم تعيين قيمها بواسطة المكون الأصلي؛
• الأسطر 48-55: تُنشئ طريقة [generateErrors] قائمة الأخطاء التي سيتم عرضها بواسطة العلامة <ul> في الأسطر 16-18. بالإضافة إلى ذلك، تقوم بتعديل السمة الثابتة [error]، سواء لعرض قائمة الأخطاء هذه (السطر 15) أو لإخفاء زر الإنشاء (السطر 13)؛

7.4. تشغيل المشروع