Tlačítko, které počká

Chybové zprávy řeknou, co je špatně, až když zákazník formulář odešle. Jde to i jinak: nenechat ho formulář odeslat, dokud není vyplněný. Tlačítko Objednat zůstane neaktivní (disabled), dokud není zadané jméno a vybraný nápoj. Na neaktivní tlačítko nejde kliknout a formulář pak neodešle ani Enter. :disabled znáte z lekce Šablony:

<button :disabled="jmeno === '' || napoj === ''">Objednat</button>

Vue atribut udržuje aktuální: jakmile zákazník napíše jméno a vybere nápoj, podmínka je false a tlačítko funguje. Ve style.css tohoto cvičení je neaktivní tlačítko šedé.

Podmínka, kterou potřebujete na víc místech, se čte líp ve funkci s dobrým názvem:

function jeVyplneno() {
    return jmeno.value !== "" && napoj.value !== "";
}

Tlačítko pak má :disabled="!jeVyplneno()" a nápověda, která se ukazuje, jen dokud je tlačítko neaktivní, má v-if="!jeVyplneno()". Tlačítko, které je prostě šedé a ani slovem neřekne proč, nechá zákazníka hádat.