Wie viel ist gepackt
Das Packen geht schneller, wenn du siehst, wie weit du schon bist. Zeige unter der Überschrift in einem Absatz mit der Klasse anzahl, wie viele Sachen gepackt sind: 0 / 7 gepackt am Anfang, 1 / 7 gepackt nach dem ersten Klick auf Packen und so weiter.
Und wenn alles gepackt ist, zeige unter der Liste Alles gepackt! Gute Reise. Wenn du danach etwas wieder auspackst, verschwindet die Nachricht.
Ein Tipp: Die Anzahl der gepackten Sachen lässt sich aus sachen berechnen, also brauchst du dafür kein Ref. Schreibe eine Funktion, die sie berechnet und zurückgibt, und rufe die Funktion in der Vorlage auf, so wie beim Filtern in der Lektion Bedingungen und Listen. filter() und length kommen dir dabei zugute. Immer wenn sich sachen ändert, rendert Vue die Vorlage neu, die Funktion läuft erneut und die Zahl stimmt immer.
So schreibst du es:
Anweisungen
- 1
Zeige unter der Überschrift in einem Absatz mit der Klasse
anzahl, wie viele Sachen gepackt sind:2 / 7 gepackt. - 2
Wenn jede Sache gepackt ist, zeige unter der Liste
Alles gepackt! Gute Reise.