v-for with v-if precedence in Vue - Step-by-Step Execution

Concept Flow - v-for with v-if precedence

Start v-for loop

↓

For each item

↓

Evaluate v-if condition

↓

Render item

↓

Next item or End loop

The v-for loop runs first, then for each item, the v-if condition is checked. Items passing v-if render; others skip.

Execution Sample

Vue

<template>
  <ul>
    <li v-for="item in items" v-if="item.show" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

This code loops over items and only renders list items where item.show is true.

Execution Table

Step	Current item	v-if condition (item.show)	Render?	Output
1	{id:1, name:'Apple', show:true}	true	Yes	<li>Apple</li>
2	{id:2, name:'Banana', show:false}	false	No
3	{id:3, name:'Cherry', show:true}	true	Yes	<li>Cherry</li>
4	End of items	-	-	Loop ends

💡 All items processed; loop ends.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
item	undefined	{id:1, name:'Apple', show:true}	{id:2, name:'Banana', show:false}	{id:3, name:'Cherry', show:true}	undefined
renderedItems	[]	[Apple]	[Apple]	[Apple, Cherry]	[Apple, Cherry]

Key Moments - 2 Insights

Why does the item with show:false not appear in the output?

Because v-if runs after v-for picks the item, and the condition is false, so Vue skips rendering that item (see execution_table step 2).

Does v-if filter items before v-for loops?

No, v-for runs first to loop over all items, then v-if decides if each item renders (see concept_flow).

Visual Quiz - 3 Questions

Look at the execution table, what is rendered at step 3?

A <li>Banana</li>

B <li>Cherry</li>

C <li>Apple</li>

D Nothing

💡 Hint

Check the 'Render?' and 'Output' columns at step 3 in the execution_table.

At which step does the v-if condition evaluate to false?

A Step 1

B Step 3

C Step 2

D No step

💡 Hint

Look at the 'v-if condition' column in the execution_table.

If all items had show:true, how would the renderedItems array change after step 3?

A It would include all three items

B It would be empty

C It would include only the first item

D It would include only the last item

💡 Hint

Refer to variable_tracker's renderedItems row and imagine all v-if conditions true.

Concept Snapshot

v-for loops over all items first.
v-if runs on each item after v-for picks it.
Only items passing v-if render.
Use v-if inside v-for to conditionally render.
Remember: v-for has higher precedence than v-if.

Full Transcript

In Vue, when you use v-for with v-if on the same element, Vue first loops over all items with v-for. Then for each item, it checks the v-if condition. If the condition is true, Vue renders that item. If false, Vue skips rendering it. This means v-for runs before v-if. For example, if you have a list of fruits and only want to show those marked as 'show:true', Vue will loop over all fruits but only render those with show true. This helps you filter items visually without changing the original list. Remember, v-for picks items first, then v-if decides if they appear.