Ein Button, der wartet

Fehlermeldungen sagen, was falsch ist, nachdem der Kunde das Formular abgeschickt hat. Eine andere Möglichkeit ist, ihn das Formular gar nicht erst abschicken zu lassen, bevor es ausgefüllt ist: Der Button Bestellen bleibt deaktiviert, bis es einen Namen und ein Getränk gibt. Ein deaktivierter Button lässt sich nicht anklicken, und in einem Formular schickt auch die Eingabetaste es nicht ab. :disabled kennst du aus der Lektion Vorlagen-Syntax:

<button :disabled="name === '' || getraenk === ''">Bestellen</button>

Vue hält das Attribut aktuell: Sobald der Kunde einen Namen getippt und ein Getränk gewählt hat, ist die Bedingung false, und der Button funktioniert. In der style.css dieser Übung ist ein deaktivierter Button grau.

Eine Bedingung, die du an mehr als einer Stelle brauchst, lässt sich in einer Funktion mit einem guten Namen leichter lesen:

function istAusgefuellt() {
    return name.value !== "" && getraenk.value !== "";
}

Dann hat der Button :disabled="!istAusgefuellt()", und ein Hinweis, der nur erscheint, solange der Button deaktiviert ist, hat v-if="!istAusgefuellt()". Ein Button, der einfach grau ist, ohne ein Wort dazu, warum, lässt den Kunden raten.