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>

• خطوط ۷، ۱۴، ۱۹: کامپوننت [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>

نظرات

• خط ۴: تگ <b-dropdown> برای تعریف یک لیست کشویی [1] در قالب یک دکمه استفاده می‌شود که با کلیک کردن، گزینه‌های موجود در لیست [2] را نمایش می‌دهد. [text=’Options’] متنی را که روی دکمه [1] نمایش داده می‌شود، تعریف می‌کند؛
• خطوط ۵–۷: تگ <dropdown-item> یک آیتم در لیست کشویی را تعریف می‌کند؛
• خط ۵: صفت [v-for] نشان می‌دهد که تگ <dropdown-item> باید برای هر عنصر [option] از صفت [options]، خطوط ۳۷–۴۱، در کامپوننت تکرار شود. [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>] نوشته شود؛
• خط ۶: اگر ویژگی [key] حذف شود، ESLint یک هشدار را فعال می‌کند. مقدار ویژگی [key] باید در طول زمان ثابت بماند. بنابراین، مقدار [index] برای این عنصر مناسب نیست. این به آن دلیل است که اگر این عنصر حذف شود، مقادیر [index] عناصر بعدی در لیست، ۱ واحد کاهش می‌یابند. بنابراین، در اینجا، مقدار [option.id] (خطوط ۳۸–۴۰) به عنوان مقدار کلیدی استفاده می‌شود، زیرا این مقدار در صورت حذف یک عنصر تغییر نخواهد کرد. ویژگی [key] یک عنصر بهینه‌سازی برای بازتولید DOM (مدل شیء مستند) توسط [Vue.js] است، زمانی که لیست نیاز به بازتولید مجدد دارد. به نشانه [:key] توجه کنید، زیرا [key] دارای مقدار پویا است؛
• خط ۷: متد [select(index)]، در خطوط ۴۹–۵۱، زمانی که کاربر روی یک مورد در لیست کلیک می‌کند، فراخوانی خواهد شد؛
• خط ۷: متن گزینه برابر خواهد بود با مقدار [option.text] که در خطوط ۳۷–۴۱ تعریف شده است؛
• خط ۱۰: دکمه [3]. [class=’ml-3] به معنای حاشیه (m) سه فاصله به سمت چپ (l) است. [@click="generateErrors"] نشان می‌دهد که متد [generateErrors]، در خطوط ۴۵–۴۸، زمانی اجرا خواهد شد که [click] روی دکمه فعال شود. [v-if="!error"] نشان می‌دهد که نمایش دکمه مشروط به مقدار ویژگی ثابت [error] در خط ۳۵ است؛
• خطوط ۱۵–۲۱: یک هشدار از نوع [danger] [4] که همچنین توسط ویژگی استاتیک [error] در خط ۳۵ کنترل می‌شود. ویژگی [class=’mt-3’] (حاشیه بالا ۳ فاصله‌گذار) فاصله بین این هشدار و عنصر بالای آن را تنظیم می‌کند؛
• خط ۲۷: تگ HTML <br /> یک شکست خط ایجاد می‌کند؛
• خط ۱۸: شروع یک لیست غیرشماره‌ای [ul=unordered list];
• خط ۱۹: تگ یک آیتم لیست را تعریف می‌کند . در اینجا نیز از دستور [v-for] برای تولید چندباره تگ استفاده شده است. این عمل به تعداد عناصر موجود در آرایه [erreurs] در خط ۳۳ انجام می‌شود. در اینجا از صفت [:key=index] استفاده شده است. قبلاً اشاره کردیم که استفاده از شاخص عناصر در یک لیست برای تمایز بین آن‌ها روش خوبی نیست، زیرا اگر یک عنصر حذف شود، شاخص‌های تمام عناصر بعدی تغییر می‌کنند. این موضوع در اینجا مشکلی ایجاد نمی‌کند، زیرا بعید است که عناصر موجود در لیست خطا حذف شوند؛
• خط ۱۹: این عنصر برای نمایش عنصر [erreur] از لیست [erreurs] استفاده می‌شود؛
• خطوط ۳۰–۴۳: تمام عناصر پویا در [template]، ویژگی‌های کامپوننت هستند. در اینجا هیچ خصوصیتی از نوع [props] وجود ندارد که مقدار آن توسط کامپوننت والد تعیین شده باشد؛
• خطوط ۴۸–۵۵: متد [generateErrors] فهرست خطاهایی را که باید توسط تگ در خطوط ۱۶–۱۸ نمایش داده شود، تولید می‌کند. علاوه بر این، این متد ویژگی استاتیک [error] را هم برای نمایش این لیست خطاها (خط 15) و هم برای پنهان کردن دکمهٔ تولید (خط 13) تغییر می‌دهد؛

7.4. اجرای پروژه