Rendering von Listen

  • 4 Minuten

Das Arbeiten mit Daten umfasst häufig Arrays oder andere Typen von Sammlungen. Normalerweise durchlaufen Sie alle Elemente in einer Sammlung, indem Sie eine Form der Schleife verwenden. Vue.js unterstützt Schleifen über eine Anweisung mit dem Namen v-for.

Einführung in die v-for-Anweisung

Wenn Sie alle Elemente in einer Liste anzeigen möchten, können Sie die Anweisung v-for verwenden. v-for verhält sich ähnlich wie eine for...of-Schleife in JavaScript. Sie durchläuft eine Sammlung und bietet Zugriff auf die einzelnen Elemente über eine von Ihnen deklarierte Variable.

Die Syntax für v-for sieht folgendermaßen aus:

v-for="itemName in collectionName"

collectionName ist der Name des Arrays in Ihrem Datenobjekt. Bei jeder Iterationen nimmt itemName die Identität des aktuellen Elements an. Wenn Sie v-for in einer Vorlage verwenden möchten, fügen Sie die Anweisung in einer Elementdeklaration hinzu. Hierdurch wird das HTML-Element so oft wiederholt, wie es Elemente im Array gibt.

Hinweis

Wenn Sie eine ungeordnete Liste (ul) erstellen, würden Sie v-fornicht zum ul-Element hinzufügen. Sie würden es stattdessen zum li-Element hinzufügen, da das li-Element wiederholt wird.

Verwenden von v-for in einer App

Um die v-for-Anweisung in einer App zu verwenden, müssen Sie zwei Dinge tun:

  • Verfügbarmachen eines Arrays über das Datenobjekt. Um die v-for-Anweisung zu verwenden, stellen Sie sicher, dass Daten vom Typ Array vorhanden sind, welche die data()-Methode zurückgibt.
  • Fügen Sie die v-for-Anweisung zu einem -Element hinzu. Fügen Sie die v-for-Anweisung zu einem HTML-Element hinzu. Um Daten aus dem Array anzuzeigen, verwenden Sie die Syntax mit doppelten geschweiften Klammern ({{ }}).

Nehmen wir an, Sie möchten ein Array aus Namen in Ihrem Datenobjekt verfügbar machen:

Vue.createApp({
    data() {
        return {
            names: ['Susan', 'Peter', 'Bill' ]
        }
    }
}).mount('#demo');

Für das Anzeigen der Elemente können Sie den folgenden Code verwenden:

<ul id="demo">
    <li v-for="name in names">{{ name }}</li>
</ul>

Beim Rendern des Codes werden alle Namen im Array angezeigt:

  • Susan
  • Peter
  • Bill

Schlüssel und Status

Wenn die Daten geändert werden, muss Vue.js in der Lage sein, die entsprechenden Bereiche der Anzeige zu aktualisieren. Bei der Arbeit mit einer Liste empfiehlt es sich, das einzelne Element anstelle der gesamten Liste zu aktualisieren. Um Vue.js das Auffinden eines einzelnen Elements zu ermöglichen, weisen Sie jedem angezeigten Element einen Schlüssel zu. Sie müssen den Schlüssel nicht zu Ihrem Datenobjekt hinzufügen. Sie können es mithilfe des Indexes des Arrays generieren.

Sie können den Index abrufen, indem Sie die v-for-Deklaration aktualisieren, wie im folgenden Code gezeigt:

<ul id="demo">
    <li v-for="(name, index) in names" :key="index">{{ name }}</li>
</ul>

index wird für jedes Element im Array inkrementiert. Die :key-Anweisung speichert den Schlüssel für Vue.js, mit dem das einzelne Element aktualisiert werden kann, wenn es zu Änderungen kommt.