Wenn das Laden fehlschlägt

Die Seite in dieser Übung zeigt Wird geladen… und sonst nichts, egal wie lange du wartest. Die Konsole sagt, warum:

[Vue warn]: Unhandled error during execution of mounted hook
  at <App>
SyntaxError: Failed to execute 'json' on 'Response': Unexpected token 'N', "Not Found" is not valid JSON
    at eval (App.vue:9)

Im Namen der Datei ist ein Tippfehler: menues.json. Diese Datei gibt es nicht, also antwortet der Server mit dem Status 404 Not Found, wie du aus dem JavaScript-Kurs weißt, und schickt den Text Not Found statt der Speisekarte. In Zeile 9 kann antwort.json() das nicht als JSON lesen und endet mit einem Fehler, und die Funktion in onMounted bricht dort ab. Sie kommt nie zu laedt.value = false, also zeigt die Seite weiter Wird geladen….

Prüfe antwort.ok, bevor du die Daten liest: Es ist false, wenn der Server mit einem Fehler geantwortet hat. Behalte die Meldung für den Kunden in einem Ref und setze laedt in beiden Fällen auf false:

const fehler = ref("");

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

In der Vorlage ist die Meldung ein dritter Fall zwischen den anderen beiden, mit v-else-if, das du aus Bedingungen und Listen kennst:

<template>
    <h1>Café am Eck</h1>
    <p v-if="laedt">Wird geladen…</p>
    <p v-else-if="fehler" class="fehler">{{ fehler }}</p>
    <ul v-else>
        <li v-for="eintrag in menue" :key="eintrag.id">{{ eintrag.name }}: {{ eintrag.preis }} €</li>
    </ul>
</template>

Leerer Text zählt in einer Bedingung als falsch und jeder andere Text als wahr, also erscheint die Meldung nur, wenn es eine gibt.

Und was, wenn die Verbindung gar nicht funktioniert? Dann kommt keine Antwort, und fetch() selbst endet mit einem Fehler, TypeError: Failed to fetch, den du mit try/catch abfangen würdest, wie im JavaScript-Kurs. In der Vorschau kommt immer eine Antwort, also prüfst du hier antwort.ok.