7. Projekt [vuejs-05]: dyrektywa [v-for]

Projekt [vuejs-05] zawiera dyrektywę [v-for]:

7.1. Główny skrypt [main.js]

Kod głównego skryptu [main.js] jest identyczny z kodem skryptu [main.js] z poprzednich projektów.

7.2. Główny komponent [App]

Kod komponentu [App] jest następujący:

<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>

• wiersze 7, 14, 19: komponent [App] wykorzystuje komponent [VFor];

7.3. Komponent [VFor]

Wizualny efekt będzie wyglądał następująco:

Kod komponentu [VFor] jest następujący:

<template>
  <div>
    <!-- lista rozwijana -->
    <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>
    <!-- przycisk -->
    <b-button class="ml-3"
              variant="primary"
              @click="generateErrors"
              v-if="!error">Générer une liste d'erreurs</b-button>
    <!-- komunikat ostrzegawczy -->
    <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>
<!-- skrypt -->
<script>
  export default {
    name: "VFor",

    // statyczne właściwości komponentu
    data() {
      return {
        // lista błędów
        erreurs: [],
        // błąd czy nie
        error: false,
        // lista opcji menu
        options: [
          { text: "option 1", id: 1 },
          { text: "option 2", id: 2 },
          { text: "option 3", id: 3 }
        ]
      };
    },

    // metody
    methods: {
      // generowanie listy błędów
      generateErrors() {
        this.erreurs = ["erreur 1", "erreur 2", "erreur 3"];
        this.error = true;
      },
      // użytkownik wybrał opcję
      select(index) {
        alert("Vous avez choisi : " + this.options[index].text);
      }
    }
  };
</script>

Komentarze

• wiersz 4: tag <b-dropdown> służy do zdefiniowania listy rozwijanej [1] w postaci przycisku, który po kliknięciu wyświetla opcje z listy [2]. [text=’Options’] określa tekst wyświetlany na przycisku [1];
• wiersze 5–7: tag <dropdown-item> definiuje element listy rozwijanej;
• wiersz 5: atrybut [v-for] wskazuje, że tag <dropdown-item> musi być powtórzony dla każdego elementu [option] atrybutu [options] (wiersze 37–41) komponentu. [index] oznacza numer elementu na liście [0, 1, ..., n]. Nazwa elementu [option] oraz nazwa indeksu mogą być dowolne. Można było wpisać [<b-dropdown-item v-for="(o,i) in options" :key="o.id" @click="select(i)">{{o.text}}</b-dropdown-item>];
• wiersz 6: jeśli pominie się atrybut [key], ESLint generuje ostrzeżenie. Wartość atrybutu [key] musi pozostawać niezmienna w czasie. Dlatego też wartość [index] tego elementu jest nieodpowiednia. Gdyż jeśli ten element zostanie usunięty, wartości [index] elementów znajdujących się za nim na liście zostaną zmniejszone o 1. Dlatego też jako wartość klucza przyjmuje się tutaj wartość [option.id] (wiersze 38–40), która nie ulegnie zmianie w przypadku usunięcia elementu. Atrybut [key] służy do optymalizacji odświeżania elementu DOM (Document Object Model) przez [Vue.js], gdy lista musi zostać odświeżona. Należy zwrócić uwagę na notację [:key], ponieważ [key] ma wartość dynamiczną;
• wiersz 7: metoda [select(index)], wiersze 49–51, zostanie wywołana, gdy użytkownik kliknie element listy;
• wiersz 7: tekst opcji będzie miał wartość [option.text] zdefiniowaną w wierszach 37–41;
• wiersz 10: przycisk [3]. [class=’ml-3] oznacza margines (m) po lewej stronie (l) wynoszący trzy spacje. [@click="generateErrors"] oznacza, że metoda [generateErrors] (wiersze 45–48) zostanie wykonana po naciśnięciu przycisku z atrybutem [click]. [v-if="!error"] oznacza, że wyświetlanie przycisku zależy od wartości statycznego atrybutu [error] z wiersza 35;
• wiersze 15–21: alert typu [danger] [4], również kontrolowany przez atrybut statyczny [error] z wiersza 35. Atrybut [class=’mt-3’] (margin top 3 spacers) określa odstęp między tym alertem a elementem znajdującym się nad nim;
• wiersz 27: tag HTML <br /> powoduje przejście do nowego wiersza;
• wiersz 18: początek listy nieuporządkowanej [ul=unordered list];
• wiersz 19: znacznik <li> definiuje element listy <ul>. Również w tym przypadku używa się dyrektywy [v-for], aby wygenerować ten znacznik wielokrotnie. Tyle razy, ile elementów będzie zawierała tablica [erreurs] z wiersza 33. Wykorzystuje się tu atrybut [:key=index]. Wspomniano wcześniej, że indeks elementów listy nie stanowi dobrego kryterium rozróżnienia między elementami listy, ponieważ w przypadku usunięcia jednego elementu zmienia się indeks wszystkich następujących po nim elementów. Tutaj nie ma to znaczenia, ponieważ elementy listy błędów nie podlegają usunięciu;
• wiersz 19: element służy do wyświetlenia elementu [erreur] z listy [erreurs];
• wiersze 30–43: wszystkie elementy dynamiczne z listy [template] są atrybutami komponentu. Nie ma tu żadnej właściwości typu [props], której wartość byłaby ustalana przez komponent nadrzędny;
• wiersze 48–55: metoda [generateErrors] generuje listę błędów, która ma zostać wyświetlona za pomocą tagu <ul> z wierszy 16–18. Ponadto modyfikuje ona statyczny atrybut [error], zarówno w celu wyświetlenia tej listy błędów (wiersz 15), jak i ukrycia przycisku generowania (wiersz 13);

7.4. Wykonanie projektu