Náhradní obsah

Prázdná objednávka ukazuje jen Celkem: 0 Kč a tlačítko, které nemá co vyprázdnit. Krátká zpráva by byla vlídnější a panel ji může přinést sám. Co napíšete mezi <slot> a </slot>, je náhradní obsah slotu: ukáže se, když rodič slotu žádný obsah nedá.

<template>
    <section class="panel">
        <h2>{{ nadpis }}</h2>
        <slot>
            <p>Zatím tu nic není.</p>
        </slot>
    </section>
</template>

<Panel nadpis="Novinky" />
<Panel nadpis="Otevírací doba">
    <p>Každý den od 7 do 19 hodin.</p>
</Panel>

Panel Novinky žádný obsah nemá, takže ukáže Zatím tu nic není. Panel s otevírací dobou ukáže svůj odstavec a jeho náhradní obsah na stránce vůbec není.

Obsah, který nic neukáže, se počítá jako žádný obsah. Když má všechno mezi tagy v-if s nesplněnou podmínkou, slot je prázdný a ukáže se náhradní obsah. Víc prvků může mít jeden společný v-if v <template v-if>, jak to znáte z lekce Podmínky a seznamy:

<Panel nadpis="Vaše objednávka">
    <template v-if="objednavka.length > 0">
        <ul>
            ...
        </ul>
        <p>Celkem: {{ celkem }} Kč</p>
    </template>
</Panel>

Dokud je objednávka prázdná, panel říká Zatím tu nic není. Jakmile v ní něco je, ukáže seznam a celkovou cenu.

Typická chyba: samouzavírací <slot /> a za ním text, třeba <slot /><p>Zatím tu nic není.</p>. Odstavec je pak obyčejná součást panelu a ukazuje se pořád, pod obsahem.