v-for и v-if

Не стоит ставить v-if и v-for на один и тот же элемент, потому что эти директивы решают разные задачи и в таком сочетании приводят к неоднозначному порядку выполнения, лишним проходам по списку и ошибкам области видимости (особенно в Vue 3). Рекомендуется либо оборачивать элемент в <template>/<div> и выносить v-if наружу, либо предварительно фильтровать данные (через вычисляемые свойства или методы). Это делает код предсказуемым, производительным и проще для отладки.

v-for и v-if отвечают на разные вопросы:

• v-for: «Как пройти по списку и создать элементы?» — определяет количество и набор создаваемых узлов.
• v-if: «Показывать этот элемент или нет?» — решает судьбу уже конкретного узла.
• Когда они оказываются на одном и том же элементе, движку приходится одновременно и создавать список, и тут же решать, какие элементы показывать, что приводит к проблемам: полный проход по массиву даже для скрытых элементов, неоднозначная логика и, в Vue 3, невозможность использовать переменные цикла внутри v-if на том же элементе.
• В Vue 2 такое сочетание формально работает, но считается анти-паттерном из-за лишних рендеров и усложнения логики; в Vue 3 v-if больше не видит переменные, объявленные v-for на том же узле, поэтому код просто перестает быть валидным.
• По сути нарушается принцип «одна директива — одна задача на одном узле»: либо элемент отвечает за перебор (v-forv-if), но не за всё сразу.

Практический вывод: если нужно по условию пропускать весь цикл — вынесите v-if на обертку (например, <template> или <div>), а если нужно отфильтровать элементы внутри списка — предварительно фильтруйте массив (через вычисляемое свойство или метод), а внутри v-for оставляйте только перебор.