Eigene Gewohnheiten

Fünf Vorschläge sind ein Anfang, aber der Tracker sollte auch deine eigenen Gewohnheiten aufnehmen. Unter der Liste kommt ein Formular mit einem Textfeld und einem Button Hinzufügen, gebaut wie in der Lektion Formulare:

<form @submit.prevent="gewohnheitHinzufuegen">
    <input v-model.trim="neuerName" placeholder="Neue Gewohnheit">
    <button>Hinzufügen</button>
</form>
<p v-if="namensfehler" class="fehler">{{ namensfehler }}</p>

v-model.trim speichert, was du tippst, im Ref neuerName, ohne Leerzeichen am Anfang und am Ende. Das Formular wird mit seinem Button oder mit Enter im Feld abgeschickt, und .prevent verhindert, dass der Browser die Seite neu lädt, damit gewohnheitHinzufuegen die Arbeit erledigen kann:

function gewohnheitHinzufuegen() {
    if (neuerName.value === "") {
        namensfehler.value = "Gib der Gewohnheit einen Namen.";
        return;
    }
    gewohnheiten.value.push({
        id: Date.now(),
        name: neuerName.value,
        symbol: "⭐",
        erledigt: false,
    });
    neuerName.value = "";
    namensfehler.value = "";
}

Eine neue Gewohnheit braucht eine ID, die keine andere Gewohnheit hat, für :key und für umschalten(). Wie im Budget-Tracker liefert Date.now() eine: die Anzahl der Millisekunden seit Beginn des Jahres 1970, die bei jedem Klick auf „Hinzufügen“ eine andere ist. Eine neue Gewohnheit bekommt einen Stern als Symbol und ist noch nicht erledigt.

Dank .trim wird ein Name, der nur aus Leerzeichen besteht, zu "", also zeigt die Funktion einen Fehler an, statt eine leere Gewohnheit hinzuzufügen, und return beendet sie. Ist der Name in Ordnung, fügt die Funktion die Gewohnheit hinzu und löscht den Fehler und auch das Feld: neuerName wird zu "", und v-model leert damit das Feld.