Группировка с <template>

Иногда v-if или v-for должен охватывать сразу несколько элементов. Можно обернуть их в div, но это не всегда разрешено (внутри ul могут быть только li) или желательно (это может сломать вёрстку). Поставьте директиву на элемент <template>. Он группирует элементы внутри себя, а сам <template> Vue на страницу не выводит:

<template v-if="open">
    <h2>Меню</h2>
    <p>Свежий кофе и торты каждый день.</p>
</template>
<p v-else>Извините, мы закрыты.</p>

Пока open равно true, на странице будут только h2 и p, и ничего вокруг них. <template v-for> работает так же, а :key ставится на <template>:

<template v-for="item in menu" :key="item.id">
    <h3>{{ item.name }}</h3>
    <p>€{{ item.price }}</p>
</template>

А вот чего не стоит делать никогда: ставить v-if и v-for на один элемент, например чтобы показать только те позиции, которые не распроданы:

<li v-for="item in menu" v-if="!item.soldOut" :key="item.id">{{ item.name }}</li>

Vue проверяет v-if первым, до того как v-for создаст item, поэтому в условии item ещё не существует. Страница остаётся пустой, а консоль начинается с такого предупреждения:

[Vue warn]: Property "item" was accessed during render but is not defined on instance.
  at <App>

Несколькими строками ниже идёт ошибка TypeError: Cannot read properties of undefined (reading 'soldOut').

Лучше поставьте v-for на <template> вокруг элемента, а v-if оставьте на самом элементе:

<template v-for="item in menu" :key="item.id">
    <li v-if="!item.soldOut">{{ item.name }}</li>
</template>

Типичная ошибка: :key на элементе внутри <template v-for>. Страница не запустится, а красная полоса напишет <template v-for> key should be placed on the <template> tag.