Gewohnheits-Tracker

Willkommen zur letzten Lektion des Vue-Kurses! Hier baust du Schritt für Schritt eine ganze App: einen Gewohnheits-Tracker. Gewohnheiten sind kleine Dinge, die du jeden Tag tun möchtest, etwa genug Wasser trinken oder spazieren gehen. Die App listet sie auf, und du hakst ab, was du heute geschafft hast. Sie zeigt deinen Fortschritt mit einem Balken, lässt dich eigene Gewohnheiten hinzufügen und die entfernen, die du nicht willst, und merkt sich alles, sogar an wie vielen Tagen in Folge du alle erledigt hast.

Du nutzt, was du im ganzen Kurs gelernt hast: Komponenten mit Props und Ereignissen, Daten aus einer Datei, berechnete Werte, ein Formular und ein Composable. Jede Übung setzt dort an, wo die vorige aufgehört hat (ihr Editor beginnt mit dem fertigen Code der vorigen Übung), und fügt ein Stück hinzu.

Der Plan. Die Gewohnheiten liegen in App.vue, in einem Ref mit einem Array aus Objekten. Jede Gewohnheit hat eine id, einen name, ein symbol (ein Emoji) und erledigt, das sagt, ob du sie heute erledigt hast. Eine einzelne Gewohnheit anzuzeigen ist die Aufgabe der Komponente im zweiten Tab, Gewohnheit.vue. Sie bekommt die Gewohnheit als Prop und streicht eine erledigte Gewohnheit bereits durch: Dafür sind <li :class="{ erledigt: gewohnheit.erledigt }"> und ihr <style scoped> da.

Wenn du eine Gewohnheit abhakst, ändert Gewohnheit sie nicht selbst. Die Gewohnheiten gehören App.vue, also bittet die Komponente ihre Eltern-Komponente mit einem Ereignis darum, wie in der Lektion Ereignisse von Komponenten. Die Checkbox zeigt den Wert mit :checked an, und wenn du sie anklickst, sendet ihr change-Ereignis das Ereignis umschalten mit der ID der Gewohnheit:

<input type="checkbox" :checked="gewohnheit.erledigt" @change="emit('umschalten', gewohnheit.id)">

App.vue hört mit @umschalten="umschalten" zu. Ihre Funktion umschalten(id) findet die Gewohnheit mit dieser ID und ändert ihr erledigt:

function umschalten(id) {
    const gewohnheit = gewohnheiten.value.find((eintrag) => eintrag.id === id);
    gewohnheit.erledigt = !gewohnheit.erledigt;
}

find() gibt das Objekt der Gewohnheit selbst zurück, keine Kopie, also ändert eine Änderung von erledigt die Gewohnheit in gewohnheiten. Vue aktualisiert dann die Seite, und Gewohnheit zeigt die Gewohnheit durchgestrichen an. Die Daten liegen also an einer Stelle und werden an einer Stelle geändert, und die Komponenten zeigen sie nur an.

Warum nicht v-model="gewohnheit.erledigt", wie in der Lektion Formulare? Das würde die Daten der Eltern-Komponente von innen in Gewohnheit ändern, und in einer größeren App wüsstest du bald nicht mehr, wo sich deine Daten ändern. Wie in der Lektion Ereignisse von Komponenten gehen die Daten per Props nach unten zur Komponente, und die Komponente bittet mit Ereignissen um Änderungen.