Was einpacken

Zeit für ein Projekt! Dieser Checkpoint wendet die ersten vier Lektionen an: Refs, Ereignisse, Bedingungen, Listen und Klassen. Wie in den Checkpoints des JavaScript-Kurses sagen die Anweisungen, was die Seite tun soll, und wie du es schreibst, ist deine Sache. Jede Übung setzt dort fort, wo die vorige aufgehört hat.

Das Projekt. Du fährst übers Wochenende in die Berge und machst dir eine Packliste für die Tour. In drei Übungen zeigst du, was mitmuss, und packst es per Klick, zählst dann, was schon im Rucksack ist, und blendest zum Schluss Gepacktes aus und entfernst, was du nicht brauchst.

Die Daten. In App.vue enthält das Ref sachen ein Array mit einem Objekt für jede Sache, die mitmuss: ihre id, ihren name und gepackt, was sagt, ob sie schon im Rucksack ist:

{ id: 1, name: "Zelt", gepackt: false }

Die Vorlage hat eine Überschrift und eine leere Liste (ul), und style.css hat die Klasse gepackt, die eine Sache durchstreicht.

Die Aufgabe. Zeige jede Sache aus sachen in der Liste als li mit ihrem Namen und gib jedem li einen Key. Jede Sache bekommt außerdem einen Button: Packen, solange sie nicht gepackt ist, und Auspacken, sobald sie es ist. Ein Klick darauf packt die Sache oder packt sie wieder aus, und das li einer gepackten Sache hat die Klasse gepackt.

Ein Tipp: Ein Handler kann die Sache als Argument bekommen und sie ändern: sache.gepackt = !sache.gepackt. Die Sache ist eines der Objekte im Array des Refs, also sieht Vue die Änderung und aktualisiert die Seite.