Seskupení pomocí <template>

Někdy má v-if nebo v-for platit pro víc prvků najednou. Mohli byste je obalit do div, ale to není vždycky dovolené (v ul smí být jen li) ani žádoucí (může to rozbít rozvržení). Dejte proto direktivu na prvek <template>. Ten prvky uvnitř seskupí a Vue samotný <template> na stránku nedá:

<template v-if="otevreno">
    <h2>Nabídka</h2>
    <p>Každý den čerstvá káva a dorty.</p>
</template>
<p v-else>Bohužel, máme zavřeno.</p>

Dokud otevreno platí, dostane stránka jen h2 a p, bez ničeho kolem. <template v-for> funguje stejně, s :key na <template>:

<template v-for="polozka in nabidka" :key="polozka.id">
    <h3>{{ polozka.nazev }}</h3>
    <p>{{ polozka.cena }} Kč</p>
</template>

A tohle nedělejte nikdy: v-if a v-for na stejném prvku, třeba abyste ukázali jen položky, které nejsou vyprodané:

<li v-for="polozka in nabidka" v-if="!polozka.vyprodano" :key="polozka.id">{{ polozka.nazev }}</li>

Vue kontroluje v-if dřív, než v-for vytvoří polozka, takže v podmínce polozka ještě neexistuje. Stránka zůstane prázdná a konzole začne tímto varováním:

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

O pár řádků níž je pak chyba TypeError: Cannot read properties of undefined (reading 'vyprodano').

Dejte místo toho v-for na <template> kolem prvku a v-if nechte na prvku:

<template v-for="polozka in nabidka" :key="polozka.id">
    <li v-if="!polozka.vyprodano">{{ polozka.nazev }}</li>
</template>

Typická chyba: :key na prvku uvnitř <template v-for>. Stránka se nespustí a červený pruh hlásí <template v-for> key should be placed on the <template> tag.