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 (Document Object Model) за допомогою [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) буде виконано під час натискання кнопки ([click]). [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. Виконання проекту