Ausblenden und Entfernen

Manche Sachen brauchst du am Ende doch nicht: Du hast eine Hütte gebucht, also kann das Zelt zu Hause bleiben. Und wenn das Meiste gepackt ist, willst du lieber nur sehen, was noch fehlt.

Entfernen. Gib jeder Sache einen zweiten Button, Entfernen, der die Sache aus der Liste entfernt. Auch die Anzahl ändert sich: Ist nichts gepackt, macht das Entfernen des Zelts daraus 0 / 6 gepackt.

Ausblenden. Füge über der Liste einen Button Gepacktes ausblenden hinzu. Ein Klick darauf blendet die gepackten Sachen aus, und der Button zeigt dann Gepacktes einblenden. Ein Klick darauf zeigt sie wieder an. Ausgeblendete Sachen stehen weiterhin in der Liste, sie sind nur nicht zu sehen, also zählt die Anzahl sie weiter mit. Und eine Sache, die du packst, während Gepacktes ausgeblendet ist, verschwindet sofort.

Ein Tipp: Merke dir in einem Ref, ob Gepacktes ausgeblendet ist. Und denk daran, dass v-if und v-for nie auf dasselbe Element gehören: Lass v-for durch das Array gehen, das eine Funktion zurückgibt, mit allen Sachen oder nur mit denen, die noch nicht gepackt sind.

Das ist das ganze Projekt. Deine Packliste besteht aus Daten: dem Array sachen und einem Ref, das sagt, ob Gepacktes ausgeblendet ist. Jeder Klick ändert die Daten, und Vue aktualisiert alles, was daraus entsteht: die Liste, die Buttons, die durchgestrichenen Sachen, die Anzahl und die Nachricht. Du hast die Seite kein einziges Mal selbst verändert, wie du es im JavaScript-Kurs mit textContent getan hast. In der nächsten Lektion, Formulare, lässt du den Nutzer tippen: Namen, Notizen und Auswahlen gehen mit v-model direkt in Refs, und ein Formular fügt einer Liste neue Bestellungen hinzu.