Gruppieren mit <template>

Manchmal soll ein v-if oder ein v-for mehrere Elemente auf einmal umfassen. Du könntest sie in ein div packen, aber das ist nicht immer erlaubt (in einem ul dürfen nur li stehen) oder gewollt (es kann ein Layout durcheinanderbringen). Setze die Direktive stattdessen auf ein <template>-Element. Es gruppiert die Elemente darin, und Vue setzt das <template> selbst nicht auf die Seite:

<template v-if="geoeffnet">
    <h2>Speisekarte</h2>
    <p>Frischer Kaffee und Kuchen, jeden Tag.</p>
</template>
<p v-else>Leider haben wir geschlossen.</p>

Solange geoeffnet wahr ist, bekommt die Seite nur das h2 und das p, ohne etwas drumherum. <template v-for> funktioniert genauso, mit dem :key am <template>:

<template v-for="artikel in menue" :key="artikel.id">
    <h3>{{ artikel.name }}</h3>
    <p>{{ artikel.preis }} €</p>
</template>

Und hier ist etwas, das du nie tun solltest: v-if und v-for am selben Element, etwa um nur die Einträge zu zeigen, die nicht ausverkauft sind:

<li v-for="artikel in menue" v-if="!artikel.ausverkauft" :key="artikel.id">{{ artikel.name }}</li>

Vue prüft v-if zuerst, bevor v-for den artikel erzeugt hat, also gibt es artikel in der Bedingung noch nicht. Die Seite bleibt leer, und die Konsole beginnt mit dieser Warnung:

[Vue warn]: Property "artikel" was accessed during render but is not defined on instance.
  at <App>

Ein paar Zeilen später folgt der Fehler TypeError: Cannot read properties of undefined (reading 'ausverkauft').

Setze stattdessen das v-for auf ein <template> um das Element und lass das v-if am Element:

<template v-for="artikel in menue" :key="artikel.id">
    <li v-if="!artikel.ausverkauft">{{ artikel.name }}</li>
</template>

Typischer Fehler: :key an dem Element innerhalb von <template v-for>. Die Seite läuft nicht, und die rote Leiste sagt <template v-for> key should be placed on the <template> tag.