Gewohnheiten aus einer Datei

Ein neuer Tracker sollte mit ein paar Vorschlägen starten, und deiner lädt sie aus einer Datei, so wie das Café in der Lektion Lebenszyklus und Daten seine Speisekarte geladen hat. Sie stehen in gewohnheiten.json im letzten Tab: die drei Gewohnheiten aus App.vue und zwei weitere, damit du siehst, wann die Liste aus der Datei kommt.

Die App lädt die Datei in onMounted, sobald die Komponente auf der Seite ist. Bis die Datei ankommt, ist gewohnheiten ein leeres Array, und zwei weitere Refs sagen, was gerade passiert: laedt ist true, bis die Antwort kommt, und fehler bekommt eine Nachricht, wenn die Datei nicht geladen werden kann:

const gewohnheiten = ref([]);
const laedt = ref(true);
const fehler = ref("");

onMounted(async () => {
    const antwort = await fetch("gewohnheiten.json");
    if (!antwort.ok) {
        fehler.value = "Die Gewohnheiten konnten nicht geladen werden.";
    } else {
        gewohnheiten.value = await antwort.json();
    }
    laedt.value = false;
});

Warum nicht einfach await fetch() ganz oben in <script setup>? Wie du in der Lektion Lebenszyklus und Daten gesehen hast, zeigt die Komponente dann gar nichts an. Mit onMounted ist die Seite sofort da, und die Gewohnheiten kommen einen Moment später.

Die Vorlage zeigt eines von drei Dingen: solange die Datei lädt, eine Meldung, die das sagt; bei einem Fehler den Fehler; und sonst die Liste. Die Elemente mit v-if, v-else-if und v-else müssen direkt aufeinander folgen:

<p v-if="laedt">Lädt…</p>
<p v-else-if="fehler" class="fehler">{{ fehler }}</p>
<ul v-else class="gewohnheiten">

Die Klasse fehler macht die Meldung rot; du findest sie in style.css.

Typische Fehler:

• .value vergessen: gewohnheiten = await antwort.json(); versucht, das Array in die Konstante selbst zu schreiben, und die Konsole zeigt TypeError: Assignment to constant variable.
• await vor antwort.json() vergessen. gewohnheiten enthält dann ein Promise statt des Arrays, und die Liste bleibt leer.