Zusammenfassung

In dieser Lektion hast du gelernt:

• v-if="bedingung" setzt ein Element nur auf die Seite, solange die Bedingung wahr ist. v-else-if und v-else folgen direkt darauf, und Vue zeigt nur das erste Element, dessen Bedingung wahr ist. Jedes v-if beginnt eine neue Kette.
• v-show lässt das Element auf der Seite und versteckt es nur, mit display: none. Es ist für Dinge, die oft gezeigt und versteckt werden; sonst nimm v-if.
• v-for="artikel in menue" erzeugt ein Element für jeden Eintrag eines Arrays. Es braucht :key="artikel.id", einen Schlüssel, der bei seinem Eintrag bleibt, nicht die Position des Eintrags, die sich beim Entfernen von Einträgen ändert.
• (artikel, index) in menue gibt dir auch die Position, ab 0, und n in 5 zählt von 1 bis 5.
• <template> gruppiert Elemente für v-if oder v-for und ist selbst nicht auf der Seite.
• v-if und v-for stehen nie am selben Element: Setze das v-for auf ein <template> darum.
• Eine leere Liste verdient eine Meldung: v-if="bestellung.length === 0" an der Meldung und v-else an der Liste.
• v-for kann durchlaufen, was eine Funktion zurückgibt, etwa artikelIn('tee'), die filtert oder sortiert. Sortiere ein neues Array, nie deinen State selbst.

In der nächsten Lektion, Checkpoint: Packliste, setzt du die letzten vier Lektionen in einer Packliste für ein Wochenende in den Bergen zusammen.

Aber vorher eine kleine Übung: die Tische des Cafés, die frei oder belegt sind.