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

Das [vuejs-05]-Projekt führt die [v-for]-Direktive ein:

7.1. Das Hauptskript [main.js]

Der Code für das Hauptskript [main.js] ist identisch mit dem des Skripts [main.js] in den vorherigen Projekten.

7.2. Die Hauptkomponente [App]

Der Code für die Komponente [App] lautet wie folgt:

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

• Zeilen 7, 14, 19: Die Komponente [App] verwendet die Komponente [VFor];

7.3. Die [VFor]-Komponente

Die visuelle Ausgabe sieht wie folgt aus:

Der Code für die [VFor]-Komponente lautet wie folgt:

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

Kommentare

• Zeile 4: Das <b-dropdown>-Tag wird verwendet, um eine Dropdown-Liste [1] in Form einer Schaltfläche zu definieren, auf die man klickt, um die Listenoptionen [2] anzuzeigen. [text='Options'] definiert den Text, der auf der Schaltfläche [1] angezeigt wird;
• Zeilen 5–7: Das <dropdown-item>-Tag definiert einen Eintrag in der Dropdown-Liste;
• Zeile 5: Das Attribut [v-for] gibt an, dass das <dropdown-item>-Tag für jedes Element [option] des Attributs [options] (Zeilen 37–41) der Komponente wiederholt werden muss. [index] steht für die Nummer des Elements in der Liste [0, 1, ..., n]. Der Name des [option]-Elements und der Index sind beliebig. Wir hätten auch [<b-dropdown-item v-for="(o,i) in options" :key="o.id" @click="select(i)">{{o.text}}</b-dropdown-item>] schreiben können;
• Zeile 6: Wenn das [key]-Attribut weggelassen wird, gibt ESLint eine Warnung aus. Der Wert des [key]-Attributs muss über die Zeit hinweg konsistent bleiben. Daher ist der [index]-Wert des Elements nicht geeignet. Denn wenn dieses Element entfernt wird, werden die [index]-Werte der nachfolgenden Elemente in der Liste um 1 verringert. Daher verwenden wir hier den Wert [option.id] als Schlüsselwert (Zeilen 38–40), der sich nicht ändert, wenn ein Element entfernt wird. Das [key]-Attribut wird von [Vue.js] verwendet, um das erneute Rendern des DOM (Document Object Model) zu optimieren, wenn die Liste neu gerendert werden muss. Beachten Sie die [:key]-Notation, da [key] einen dynamischen Wert hat;
• Zeile 7: Die Methode [select(index)] (Zeilen 49–51) wird aufgerufen, wenn der Benutzer auf ein Element in der Liste klickt;
• Zeile 7: Der Optionstext ist der in den Zeilen 37–41 definierte Wert [option.text];
• Zeile 10: die Schaltfläche [3]. [class=’ml-3] bedeutet einen linken (l) Rand (m) von drei Leerzeichen. [@click="generateErrors"] gibt an, dass die Methode [generateErrors] (Zeilen 45–48) bei einem [Klick] auf die Schaltfläche ausgeführt wird. [v-if="!error"] gibt an, dass die Anzeige der Schaltfläche vom Wert des statischen Attributs [error] in Zeile 35 abhängt;
• Zeilen 15–21: eine [danger] [4]-Warnmeldung, die ebenfalls durch das statische Attribut [error] in Zeile 35 gesteuert wird. Das Attribut [class=’mt-3’] (Rand oben 3 Leerzeichen) legt den Abstand zwischen dieser Warnmeldung und dem darüber liegenden Element fest;
• Zeile 27: Der HTML-Tag <br /> erzeugt einen Zeilenumbruch;
• Zeile 18: Beginn einer ungeordneten Liste [ul=unordered list];
• Zeile 19: Der Tag <li> definiert ein Listenelement <ul>. Auch hier verwenden wir eine [v-for]-Direktive, um den Tag mehrfach zu generieren – so oft, wie es Elemente im Array [errors] in Zeile 33 gibt. Wir verwenden hier das Attribut [:key=index]. Wir haben bereits erwähnt, dass der Index von Listenelementen keine gute Methode ist, um zwischen Listenelementen zu unterscheiden, da sich die Indizes aller nachfolgenden Elemente ändern, wenn ein Element entfernt wird. Hier spielt das keine Rolle, da die Elemente in der Fehlerliste wahrscheinlich nicht entfernt werden;
• Zeile 19: Diese Zeile dient dazu, das [error]-Element aus der [errors]-Liste anzuzeigen;
• Zeilen 30–43: Alle dynamischen Elemente in der [template] sind Attribute der Komponente. Es gibt hier keine [props]-Eigenschaften, deren Werte von der übergeordneten Komponente gesetzt werden;
• Zeilen 48–55: Die Methode [generateErrors] generiert die Liste der Fehler, die durch das <ul>-Tag in den Zeilen 16–18 angezeigt werden soll. Zusätzlich ändert sie das statische [error]-Attribut, sowohl um diese Fehlerliste anzuzeigen (Zeile 15) als auch um die Generierungsschaltfläche auszublenden (Zeile 13);

7.4. Ausführen des Projekts