Wo Fehler sichtbar werden

Fehler gehören zum Programmieren dazu, und Vue meldet sie dir an zwei Stellen.

Ein Fehler in einer Datei, etwa ein fehlendes End-Tag, verhindert, dass die App überhaupt läuft. Die Vorschau bleibt leer, und darunter steht in Rot eine Meldung, was falsch ist und wo:

App.vue(13,5): Element is missing end tag.

Die Zahlen sind Zeile und Spalte: Das Element, das in Zeile 13 von App.vue beim 5. Zeichen beginnt, hat kein End-Tag. Behebe den Fehler und klicke noch einmal auf Ausführen.

Fehler, während die App läuft, erscheinen wie im JavaScript-Kurs in der Konsole unter der Vorschau. Neben Fehlern schreibt Vue dort auch Warnungen, die mit [Vue warn]: beginnen. Nach einer Warnung läuft die App weiter, aber irgendetwas stimmt nicht. Die häufigste sagt, dass die Vorlage einen Namen verwendet, den das Skript nicht hat:

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

Sie bedeutet, dass die Vorlage preis verwendet hat, während Vue die Seite erstellte (Vue nennt das Rendern), die Komponente aber nichts mit diesem Namen hat. Die letzte Zeile sagt, in welcher Komponente es passiert ist, hier App. Meistens ist es ein Tippfehler, in der Vorlage oder im Skript, und die Seite zeigt anstelle des Namens nichts an.

Ein Fehler in einer Funktion nennt nach dem Namen der Funktion die Datei und die Zeile:

ReferenceError: summe is not defined
    at zurBestellungHinzufuegen (App.vue:9)

Davor schreibt Vue eine eigene Warnung, [Vue warn]: Unhandled error during execution of native event handler: Ein Fehler ist in einer Funktion aufgetreten, die von einem Ereignis ausgeführt wurde. Lies den Fehler unter der Warnung, er sagt, was schiefgelaufen ist.

Probiere vorab die erste Art von Fehler aus: Lösche in der Vorlage das </h1> nach der Überschrift und klicke auf Ausführen. Lies die Meldung unter der Vorschau und schreibe dann </h1> wieder hin.