7. project [vuejs-05]: richtlijn [v-for]

Het project [vuejs-05] bevat de richtlijn [v-for]:

7.1. Het hoofdscript [main.js]

De code van het hoofdscript [main.js] is identiek aan die van het script [main.js] uit de voorgaande projecten.

7.2. De hoofdcomponent [App]

De code van de component [App] is als volgt:

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

• regels 7, 14, 19: de component [App] maakt gebruik van de component [VFor];

7.3. De component [VFor]

De visuele weergave ziet er als volgt uit:

De code van de component [VFor] is als volgt:

<template>
  <div>
    <!-- een vervolgkeuzelijst -->
    <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>
    <!-- knop -->
    <b-button class="ml-3"
              variant="primary"
              @click="generateErrors"
              v-if="!error">Générer une liste d'erreurs</b-button>
    <!-- waarschuwing -->
    <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",

    // statische eigenschappen van de component
    data() {
      return {
        // lijst met fouten
        erreurs: [],
        // fout of geen fout
        error: false,
        // lijst met menuopties
        options: [
          { text: "option 1", id: 1 },
          { text: "option 2", id: 2 },
          { text: "option 3", id: 3 }
        ]
      };
    },

    // methoden
    methods: {
      // een foutenlijst genereren
      generateErrors() {
        this.erreurs = ["erreur 1", "erreur 2", "erreur 3"];
        this.error = true;
      },
      // de gebruiker heeft een optie geselecteerd
      select(index) {
        alert("Vous avez choisi : " + this.options[index].text);
      }
    }
  };
</script>

Opmerkingen

• regel 4: de tag <b-dropdown> wordt gebruikt om een vervolgkeuzelijst [1] te definiëren in de vorm van een knop waarop je kunt klikken om de opties van de lijst [2] te bekijken. [text=’Options’] definieert de tekst die op de knop [1] wordt weergegeven;
• regels 5-7: de tag <dropdown-item> definieert een item in de vervolgkeuzelijst;
• regel 5: het attribuut [v-for] geeft aan dat de tag <dropdown-item> moet worden herhaald voor elk element [option] van het attribuut [options], regels 37-41, van de component. [index] staat voor het nummer van het element in de lijst [0, 1, ..., n]. De naam van het element [option] en die van de index kunnen vrij worden gekozen. Men had ook [<b-dropdown-item v-for="(o,i) in options" :key="o.id" @click="select(i)">{{o.text}}</b-dropdown-item>] kunnen schrijven;
• regel 6: als het attribuut [key] wordt weggelaten, geeft ESLint een waarschuwing. De waarde van het attribuut [key] moet in de tijd consistent blijven. Daarom is de waarde [index] van het element niet geschikt. Want als dit element wordt verwijderd, worden de waarden [index] van de elementen die erachter staan in de lijst met 1 verlaagd. Daarom wordt hier de waarde [option.id] als sleutelwaarde genomen (regels 38-40), die niet zal veranderen als een element wordt verwijderd. Het attribuut [key] is een optimalisatie-element voor het opnieuw genereren van DOM (Document Object Model) door [Vue.js] wanneer de lijst opnieuw moet worden gegenereerd. Let op de notatie [:key], aangezien [key] een dynamische waarde heeft;
• regel 7: de methode [select(index)], regels 49-51, wordt aangeroepen wanneer de gebruiker op een item in de lijst klikt;
• regel 7: de tekst van de optie is de waarde [option.text] die is gedefinieerd op de regels 37-41;
• regel 10: de knop [3]. [class=’ml-3] betekent een marge (m) links (l) van drie spacers. [@click="generateErrors"] geeft aan dat de methode [generateErrors], regels 45-48, wordt uitgevoerd wanneer er een [click] op de knop wordt uitgevoerd. [v-if="!error"] geeft aan dat de weergave van de knop afhankelijk is van de waarde van het statische attribuut [error] in regel 35;
• regels 15-21: een waarschuwing van het type [danger] [4], die eveneens wordt bepaald door het statische attribuut [error] in regel 35. Het attribuut [class=’mt-3’] (margin top 3 spacers) bepaalt de afstand tussen deze melding en het element dat erboven staat;
• regel 27: de tag HTML <br /> zorgt voor een regeleinde;
• regel 18: begin van een ongeordende lijst [ul=unordered list];
• regel 19: de tag <li> definieert een element van de lijst <ul>. Ook hier wordt een richtlijn [v-for] gebruikt om de tag meerdere keren te genereren. Hier net zo vaak als de tabel [erreurs] op regel 33 elementen bevat. Hier wordt het attribuut [:key=index] gebruikt. We hebben eerder gezegd dat de index van de elementen in een lijst geen goede manier is om elementen in de lijst te onderscheiden, omdat bij het verwijderen van een element de index van alle volgende elementen verandert. Hier maakt dat niet uit, omdat de elementen in de foutenlijst waarschijnlijk niet zullen worden verwijderd;
• regel 19: het element dient om het element [erreur] uit de lijst [erreurs] weer te geven;
• regels 30-43: alle dynamische elementen van [template] zijn attributen van de component. Er is hier geen eigenschap van het type [props] waarvan de waarde door de bovenliggende component wordt vastgesteld;
• regels 48-55: de methode [generateErrors] genereert de lijst met fouten die moet worden weergegeven via de tag <ul> in de regels 16-18. Bovendien wijzigt deze methode het statische attribuut [error], zowel om deze foutenlijst weer te geven (regel 15) als om de generatieknop te verbergen (regel 13);

7.4. Uitvoering van het project