In Vue 3, what happens when v-if and v-for are placed on the same element, and how did that change from Vue 2?

## The rule When `v-if` and `v-for` appear on the **same element**, Vue 3 gives `v-if` the **higher priority**. The condition is evaluated once, outside the loop, and only if it is truthy does the loop run. The consequence: the `v-if` expression **cannot see the loop's aliases**, because they do not exist yet. ```vue-html <!-- broken in Vue 3 --> <li v-for="todo in todos" v-if="!todo.isComplete">{{ todo.name }}</li> ``` Here `todo` in the `v-if` is resolved against the component instance, where no such property exists. In development Vue warns that the property was accessed during render but is not defined on the instance, and then `todo.isComplete` throws because `todo` is `undefined`. ## What changed from Vue 2 | | Vue 2 | Vue 3 | |---|---|---| | Same-element precedence | `v-for` first | `v-if` first | | `v-if` reading the alias | worked, filtered per item | alias undefined, render error | | `v-if` on a whole-list flag | re-evaluated for every item | evaluated once | | Official advice | avoid combining | avoid combining | The Vue 3 migration guide lists this as a breaking change. Code that relied on Vue 2's order to filter items silently changed meaning; code that used a whole-list flag kept working and became cheaper. ## The two legitimate intents and their fixes Developers combine the two directives for one of two reasons, and each has a clean replacement: 1. **Show only some items** (per-item condition). Move `v-for` onto a wrapping `<template>` and keep `v-if` on the element inside it, which makes the order explicit. Alternatively, iterate a computed list that already contains only the wanted items. 2. **Hide the whole list** (list-level condition). Move `v-if` to the container element, such as the `<ul>`, so the check reads as what it is. ```vue-html <!-- per-item: loop outside, condition inside --> <template v-for="todo in todos" :key="todo.id"> <li v-if="!todo.isComplete">{{ todo.name }}</li> </template> <!-- list-level: condition on the container --> <ul v-if="showTodos"> <li v-for="todo in todos" :key="todo.id">{{ todo.name }}</li> </ul> ``` Note that in the `<template v-for>` form the `:key` goes on the `<template>` tag in Vue 3. ## Why the guide discourages it even when it works A same-element `v-if` that uses only a component-level flag (`v-if="showTodos"`) runs correctly in Vue 3, but it reads as a per-item filter, and a reader cannot tell which directive wins without knowing the precedence rule. Since that rule flipped between major versions, an explicit structure is safer for everyone who maintains the template. ## Checklist for an upgrade or review - Search templates for elements carrying both `v-for` and `v-if`. - If the `v-if` reads the loop alias, it is a bug in Vue 3: restructure it. - If it reads only component state, move it to the container for clarity. - In the Vue 3 migration build, a compat flag named `COMPILER_V_IF_V_FOR_PRECEDENCE` covers this change while code is being ported. ## Interview traps - **"v-if filters the list."** Only when it sits inside the loop; on the same element in Vue 3 it gates the whole loop. - **"The compiler catches it."** It does not: the template compiles, and the failure appears when the component renders. - **"`v-show` avoids the problem."** Replacing `v-if` with `v-show` on the same element makes the alias readable, but every item is still rendered and merely hidden, which is not filtering. - **"The fix is a method call in `v-if`."** A method does not change precedence; the alias is still out of scope.