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

Das Projekt [vuejs-05] enthält die Anweisung [v-for]:

7.1. Das Hauptskript [main.js]

Der Code des Hauptskripts [main.js] ist identisch mit dem des Skripts [main.js] aus den vorherigen Projekten.

7.2. Die Hauptkomponente [App]

Der Code der 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 Komponente [VFor]

Die visuelle Darstellung sieht wie folgt aus:

Der Code der Komponente [VFor] lautet wie folgt:

<template>
  <div>
    <!-- eine Dropdown-Liste -->
    <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>
    <!-- Schaltfläche -->
    <b-button class="ml-3"
              variant="primary"
              @click="generateErrors"
              v-if="!error">Générer une liste d'erreurs</b-button>
    <!-- Warnmeldung -->
    <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>
<!-- Skript -->
<script>
  export default {
    name: "VFor",

    // Statische Eigenschaften der Komponente
    data() {
      return {
        // Fehlerliste
        erreurs: [],
        // Fehler oder nicht
        error: false,
        // Liste der Menüoptionen
        options: [
          { text: "option 1", id: 1 },
          { text: "option 2", id: 2 },
          { text: "option 3", id: 3 }
        ]
      };
    },

    // Methoden
    methods: {
      // Erstellung einer Fehlerliste
      generateErrors() {
        this.erreurs = ["erreur 1", "erreur 2", "erreur 3"];
        this.error = true;
      },
      // Der Benutzer hat eine Option ausgewählt
      select(index) {
        alert("Vous avez choisi : " + this.options[index].text);
      }
    }
  };
</script>

Anmerkungen

• Zeile 4: Das Tag <b-dropdown> dient dazu, eine Dropdown-Liste [1] in Form einer Schaltfläche zu definieren, auf die man klicken kann, um die Optionen der Liste [2] anzuzeigen. [text=’Options’] definiert den auf der Schaltfläche angezeigten Text [1];
• Zeilen 5–7: Das Tag <dropdown-item> definiert ein Element der Dropdown-Liste;
• Zeile 5: Das Attribut [v-for] gibt an, dass das Tag <dropdown-item> 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 Elements [option] sowie der des Indexes können frei gewählt werden. Man hätte 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 Attribut [key] weggelassen wird, löst ESLint eine Warnung aus. Der Wert des Attributs [key] muss über die Zeit hinweg bestehen bleiben. Daher ist der Wert [index] des Elements nicht geeignet. Denn wenn dieses Element gelöscht wird, werden die Werte [index] der Elemente, die in der Liste dahinter stehen, um 1 verringert. Daher wird hier als Schlüsselwert der Wert [option.id] (Zeilen 38–40) verwendet, der sich bei Löschung eines Elements nicht ändert. Das Attribut [key] dient der Optimierung der Neugenerierung von DOM (Document Object Model) durch [Vue.js], wenn die Liste neu generiert werden muss. Beachten Sie die Notation [:key], da [key] einen dynamischen Wert hat;
• Zeile 7: Die Methode [select(index)], Zeilen 49–51, wird aufgerufen, wenn der Benutzer auf ein Element der Liste klickt;
• Zeile 7: Der Text der Option ist der in den Zeilen 37–41 definierte Wert [option.text];
• Zeile 10: Die Schaltfläche [3]. [class=’ml-3] bedeutet einen Rand (m) links (l) von drei Spacern. [@click="generateErrors"] gibt an, dass die Methode [generateErrors] (Zeilen 45–48) ausgeführt wird, wenn auf die Schaltfläche mit dem Wert [click] geklickt 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 Warnmeldung vom Typ [danger] [4], die ebenfalls durch das statische Attribut [error] in Zeile 35 gesteuert wird. Das Attribut [class=’mt-3’] (margin top 3 spacers) legt den Abstand zwischen dieser Warnmeldung und dem darüber liegenden Element fest;
• Zeile 27: Das Tag HTML <br /> bewirkt einen Zeilenumbruch;
• Zeile 18: Beginn einer ungeordneten Liste [ul=unordered list];
• Zeile 19: Das Tag <li> definiert ein Element der Liste <ul>. Auch hier wird eine Anweisung [v-for] verwendet, um das Tag mehrfach zu generieren. Und zwar so oft, wie das Array [erreurs] in Zeile 33 Elemente enthält. Hier wird das Attribut [:key=index] verwendet. Wir haben zuvor erwähnt, dass der Index der Elemente einer Liste kein gutes Unterscheidungsmerkmal zwischen den Elementen der Liste darstellt, da sich bei Löschung eines Elements die Indizes aller nachfolgenden Elemente ändern. Hier spielt das keine Rolle, da die Elemente der Fehlerliste nicht gelöscht werden können;
• Zeile 19: Das Element dient dazu, das Element [erreur] aus der Liste [erreurs] anzuzeigen;
• Zeilen 30–43: Alle dynamischen Elemente von [template] sind Attribute der Komponente. Hier gibt es keine Eigenschaft vom Typ [props], deren Wert von der übergeordneten Komponente festgelegt würde;
• Zeilen 48–55: Die Methode [generateErrors] generiert die Fehlerliste, die über das Tag <ul> in den Zeilen 16–18 angezeigt werden soll. Außerdem ändert sie das statische Attribut [error], um sowohl diese Fehlerliste anzuzeigen (Zeile 15) als auch die Generierungsschaltfläche auszublenden (Zeile 13);

7.4. Ausführung des Projekts