Summary

In this lesson, you learned that:

• v-if="condition" puts an element on the page only while the condition is true. v-else-if and v-else come right after it, and Vue shows only the first element whose condition is true. Each v-if starts a new chain.
• v-show keeps the element on the page and only hides it, with display: none. It's for things that are shown and hidden often; otherwise, use v-if.
• v-for="item in menu" makes an element for each item of an array. It needs :key="item.id", a key that stays with its item, not the item's position, which changes when items are removed.
• (item, index) in menu gives you the position too, from 0, and n in 5 counts from 1 to 5.
• <template> groups elements for v-if or v-for, and isn't on the page itself.
• v-if and v-for never go on the same element: put the v-for on a <template> around it.
• An empty list deserves a message: v-if="order.length === 0" on the message and v-else on the list.
• v-for can go over what a function returns, such as itemsIn('tea'), which filters or sorts. Sort a new array, never your state itself.

In the next lesson, Checkpoint: Packing List, you'll put the last four lessons together in a packing list for a weekend in the mountains.

But first, a little practice: the café's tables, which are free or taken.