vue/no-v-if-with-v-for

Why

In Vue 3, v-if is evaluated before v-for on the same element, so the condition cannot see the loop variable: v-for="user in users" v-if="user.active" throws or hides the whole list. In Vue 2 the order was the reverse, which is why old code and old answers still show this pattern.

Fix

Filter in a computed property and loop over it (v-for="user in activeUsers"). To hide the whole list, put v-if on a wrapper element or a <template> around the loop.

Examples

<!-- bad -->
<li v-for="user in users" v-if="user.active" :key="user.id">{{ user.name }}</li>
<!-- good -->
<li v-for="user in activeUsers" :key="user.id">{{ user.name }}</li>

Sources

• Vue docs, List Rendering (v-for with v-if)
• Vue Style Guide, Priority A (avoid v-if with v-for)

Read it in the terminal

npx github:dawidolko/frontend-skills explain vue/no-v-if-with-v-for