Návyky ze souboru

Nová aplikace by měla začít pár návrhy a ta vaše si je načte ze souboru, stejně jako kavárna svou nabídku v lekci Životní cyklus a data. Najdete je v souboru navyky.json na poslední záložce: jsou to tři návyky z App.vue a dva další, abyste poznali, že seznam přišel ze souboru.

Aplikace soubor načte v onMounted, jakmile je komponenta na stránce. Dokud soubor nepřijde, je navyky prázdné pole a co se právě děje, prozradí dva další refy: nacitani je true, dokud nepřijde odpověď, a do chyba se uloží zpráva, když se soubor načíst nepodaří:

const navyky = ref([]);
const nacitani = ref(true);
const chyba = ref("");

onMounted(async () => {
    const odpoved = await fetch("navyky.json");
    if (!odpoved.ok) {
        chyba.value = "Návyky se nepodařilo načíst.";
    } else {
        navyky.value = await odpoved.json();
    }
    nacitani.value = false;
});

Proč ne prostě await fetch() na začátku <script setup>? Jak jste viděli v lekci Životní cyklus a data, komponenta pak nezobrazí vůbec nic. S onMounted je stránka vidět hned a návyky přijdou o chvilku později.

Šablona ukáže jednu ze tří věcí: během načítání zprávu, že se načítá, při chybě chybu a jinak seznam. Prvky s v-if, v-else-if a v-else musí následovat hned po sobě:

<p v-if="nacitani">Načítám…</p>
<p v-else-if="chyba" class="chyba">{{ chyba }}</p>
<ul v-else class="navyky">

Třída chyba zprávu obarví načerveno, najdete ji ve style.css.

Typické chyby:

• Zapomenuté .value: navyky = await odpoved.json(); se snaží uložit pole přímo do konstanty a konzole ukáže TypeError: Assignment to constant variable.
• Zapomenuté await před odpoved.json(). V navyky pak místo pole bude objekt Promise a seznam zůstane prázdný.