Ausgaben hinzufügen

Zeit für das nächste Projekt! Dieser Checkpoint wendet die Formulare, berechneten Werte und Watcher der vorigen Lektionen an, zusammen mit allem, was du davor gelernt hast. Wie im vorigen Checkpoint sagen die Anweisungen, was die App tun soll, und wie du es schreibst, ist deine Sache.

Das Projekt. Du baust einen Budget-Tracker für einen Monat. Du notierst jede Ausgabe: wofür sie war, wie viel sie gekostet hat und zu welcher Kategorie sie gehört (Essen, Verkehr oder Freizeit). Die App zählt die Ausgaben zusammen, zeigt, wie viel vom Monatsbudget von 400 € übrig ist und wie viel auf jede Kategorie entfiel, und merkt sich alles im Browser. In drei Übungen fügst du Ausgaben zu einer Liste hinzu, berechnest dann die Summen und speicherst zum Schluss den Monat.

Die App. Das Formular in App.vue ist fertig: ein Textfeld #wofuer, ein Zahlenfeld #betrag, ein Select #kategorie mit den Werten essen, verkehr und freizeit und der Button Hinzufügen. Unter dem Formular steht eine leere Liste, #ausgaben. Das Skript hat nur die import-Zeile; der Rest ist deine Sache.

Die Aufgabe. Wenn das Formular abgeschickt wird, darf die Seite nicht neu laden. Halte die Ausgaben in einem Array in einem Ref und füge jede neue der Liste als Eintrag hinzu, der zeigt, wofür sie war, den Betrag und die Kategorie, zum Beispiel Pizza: 12 € (essen). Leere dann das Textfeld und das Zahlenfeld; die Kategorie darf bleiben, wie sie ist. Aber prüfe zuerst die Felder:

• Wenn das Feld #wofuer leer ist (Leerzeichen an Anfang und Ende zählen nicht), zeige Gib ein, wofür du bezahlt hast.
• Wenn der Betrag leer, 0 oder kleiner ist, zeige Gib einen Betrag größer als 0 ein.

Zeige die Meldung in einem Absatz mit der Klasse fehler. Solange etwas nicht stimmt, füge nichts hinzu, und sobald eine Ausgabe hinzugefügt ist, verschwindet die Meldung.

Ein Tipp: Jede Ausgabe braucht eine id für :key. Date.now() gibt die Anzahl der Millisekunden seit dem Beginn des Jahres 1970 zurück, die bei jedem Klick auf Hinzufügen anders ist, also eignet sie sich gut als ID: { id: Date.now(), … }. Und mit v-model.number ist der Betrag eine Zahl oder "", wenn das Feld leer ist.