A Button That Waits

Error messages say what's wrong once the customer has sent the form. Another way is not to let them send it until it's filled in: the Order button stays disabled until there's a name and a drink. A disabled button can't be clicked, and in a form, Enter doesn't send the form either. You know :disabled from the lesson Template Syntax:

<button :disabled="name === '' || drink === ''">Order</button>

Vue keeps the attribute up to date: once the customer has typed a name and chosen a drink, the condition is false, and the button works. In this exercise's style.css, a disabled button is gray.

A condition that you need in more than one place is easier to read in a function with a good name:

function isFilled() {
    return name.value !== "" && drink.value !== "";
}

Then the button has :disabled="!isFilled()", and a hint that shows only while the button is disabled has v-if="!isFilled()". A button that's simply gray, without a word about why, leaves the customer guessing.