v-for with v-if precedence in Vue

Introduction

We use v-for to repeat elements for each item in a list. v-if decides if an element should show or not. Knowing which runs first helps avoid mistakes.

Showing a list of tasks but only those that are not done.

Displaying user comments but skipping empty ones.

Rendering menu items but hiding some based on user role.

Looping through products but only showing those in stock.

Syntax

Vue

<element v-for="item in items" v-if="condition">...</element>

v-for runs before v-if. It creates the list first, then v-if decides which items to show.

For better performance, avoid putting v-if on the same element as v-for. Instead, filter the list in JavaScript or use a computed property.

Examples

This loops over all tasks, then shows only those not done.

Vue

<li v-for="task in tasks" v-if="!task.done">{{ task.name }}</li>

Using <template> to separate v-for and v-if for clarity.

Vue

<template v-for="task in tasks" v-if="!task.done">
  <li>{{ task.name }}</li>
</template>

Better way: filter tasks in a computed property, then loop only filtered tasks.

Vue

<li v-for="task in filteredTasks">{{ task.name }}</li>

Sample Program

This component loops over items. It shows only items where show is true. So Banana is skipped.

Vue

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

<script setup>
import { ref } from 'vue'

const items = ref([
  { id: 1, text: 'Apple', show: true },
  { id: 2, text: 'Banana', show: false },
  { id: 3, text: 'Cherry', show: true }
])
</script>

Important Notes

Remember, v-for runs first, then v-if. So the list is made, then filtered.

Using v-if inside v-for can hurt performance if the list is big.

Better to filter data before looping when possible.

Summary

v-for creates the list first.

v-if decides which items to show after.

For better speed, filter data before using v-for.

Practice

1. In Vue, when using v-for and v-if on the same element, which happens first?

easy

A. v-if runs first, then v-for loops over the filtered items.

B. Both run simultaneously.

C. v-for runs first, then v-if filters the rendered items.

D. Neither runs; Vue throws an error.

Solution

1. Step 1: Understand Vue's rendering order

   Vue processes v-for first to create the list of items.

2. Step 2: Apply v-if filtering

   After the list is created, v-if decides which items to actually render.

3. Final Answer:

   v-for runs first, then v-if filters the rendered items. -> Option C

4. Quick Check:

   v-for before v-if = B [OK]

Hint: Remember: loop first, then filter with v-if [OK]

Common Mistakes:

• Thinking v-if filters before looping
• Assuming simultaneous execution
• Believing Vue throws error with both directives

2. Which of the following is the correct syntax to use v-for with v-if on the same element in Vue?

easy

A. <li v-for="item in items"> <template v-if="item.active">{{ item.name }}</template> </li>

B. <li v-for="item in items" v-if="item.active">{{ item.name }}</li>

C. <li v-if="item.active" v-for=item in items>{{ item.name }}</li>

D. <li v-if="item.active"> <template v-for="item in items">{{ item.name }}</template> </li>

Solution

1. Step 1: Check directive order on the same element

   Vue allows v-for and v-if on the same element; v-for should come first logically but order in code doesn't affect behavior.

2. Step 2: Validate syntax correctness

   <li v-for="item in items" v-if="item.active">{{ item.name }}</li> correctly places both directives on the <li> element with proper syntax.

3. Final Answer:

   <li v-for="item in items" v-if="item.active">{{ item.name }}</li> -> Option B

4. Quick Check:

   Correct syntax with both directives on same element = C [OK]

Hint: Put v-for and v-if on same tag; v-for first is common [OK]

Common Mistakes:

• Swapping v-for and v-if causing confusion
• Using v-if inside v-for incorrectly
• Placing v-for inside v-if template incorrectly

3. Given the Vue template:

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

and data:

items = [
  { name: 'A', show: true },
  { name: 'B', show: false },
  { name: 'C', show: true }
]

What will be rendered inside the <ul>?

medium

A. AC

B. ABC

C. B

D. No items rendered

Solution

1. Step 1: Loop through all items with v-for

   Vue creates list items for all three objects: A, B, and C.

2. Step 2: Apply v-if to filter items

   Only items with show: true are rendered, so B is skipped.

3. Final Answer:

   <li>A</li><li>C</li> -> Option A

4. Quick Check:

   v-if filters out B, so only A and C show [OK]

Hint: v-for creates all, v-if hides unwanted [OK]

Common Mistakes:

• Assuming v-if filters before v-for
• Expecting all items to render
• Confusing property names in data

4. What is the main issue with this Vue template?

<div v-if="item.active" v-for="item in items">{{ item.name }}</div>

Assuming items is an array of objects with active boolean property.

medium

A. There is no issue; this is the recommended pattern.

B. The v-if should be inside the loop, not on the same element.

C. The order of v-if and v-for is invalid and causes syntax error.

D. Using v-if and v-for on the same element can cause performance issues.

Solution

1. Step 1: Understand v-for and v-if on same element

   Vue processes v-for first, then v-if filters items, but this means all items are looped before filtering.

2. Step 2: Identify performance concern

   Using v-if with v-for on the same element can cause unnecessary loops and slow rendering.

3. Final Answer:

   Using v-if and v-for on the same element can cause performance issues. -> Option D

4. Quick Check:

   v-for then v-if may hurt performance [OK]

Hint: Avoid v-if on same element as v-for for better speed [OK]

Common Mistakes:

• Thinking order causes syntax error
• Believing no performance impact
• Assuming v-if runs before v-for

5. You want to display only active users from a large list efficiently. Which Vue pattern is best to combine v-for and v-if for performance?

hard

A. Filter the list in a computed property, then use v-for without v-if.

B. Use v-for with v-if on the same element to filter active users.

C. Use v-if outside the v-for to filter the entire list.

D. Use nested v-for loops with v-if inside.

Solution

1. Step 1: Understand performance impact of v-if with v-for

   Using v-if inside v-for causes Vue to loop all items before filtering, which is inefficient for large lists.

2. Step 2: Use computed property to pre-filter data

   Filtering the list in a computed property returns only active users, so v-for loops only needed items without v-if.

3. Final Answer:

   Filter the list in a computed property, then use v-for without v-if. -> Option A

4. Quick Check:

   Pre-filter data before v-for for best speed [OK]

Hint: Filter data first, then loop with v-for only [OK]

Common Mistakes:

• Using v-if inside v-for causing slow loops
• Trying to filter with v-if outside v-for incorrectly
• Using nested loops unnecessarily