v-for with v-if precedence in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Output of v-for with v-if on the same element

Consider this Vue template snippet:

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

Given items = [{ id: 1, name: 'A', show: true }, { id: 2, name: 'B', show: false }, { id: 3, name: 'C', show: true }], what will be rendered?

Vue

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

A <ul><li>B</li></ul>

B <ul><li>A</li><li>B</li><li>C</li></ul>

C <ul><li>A</li><li>C</li></ul>

D <ul></ul>

💡 Hint

Remember that v-if on the same element as v-for filters items after the loop runs.

The v-for loops over all items, but v-if on the same element only renders those where item.show is true. So only items with show: true appear.

🧠 Conceptual

intermediate

Where to place v-if for better performance with v-for?

You want to render a list but only show items that meet a condition. Which approach is better for performance?

A Filter the array in the script and use <code>v-for</code> alone in the template.

B Use <code>v-if</code> on the same element as <code>v-for</code> to filter items.

C Use <code>v-if</code> on a parent element wrapping the <code>v-for</code> element.

D Use <code>v-show</code> on the <code>v-for</code> element instead of <code>v-if</code>.

💡 Hint

Think about how many times Vue has to evaluate the condition.

Filtering the array before rendering means Vue only loops over needed items, improving performance. Using v-if inside v-for runs the condition for every item.

📝 Syntax

advanced

Identify the syntax error with v-for and v-if usage

Which option contains a syntax error in Vue template using v-for and v-if?

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

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

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

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

💡 Hint

Check if all directives have valid expressions.

Option D uses v-if without a condition, which is invalid syntax and causes a compile error.

🔧 Debug

advanced

Why does this v-for with v-if not render any items?

Given this template:

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

And data:

items = [{ id: 1, text: 'One', visible: false }, { id: 2, text: 'Two', visible: false }]

Why does nothing render?

Vue

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

A Because the :key attribute is missing or invalid.

B Because all items have visible set to false, so v-if filters them all out.

C Because v-for cannot be used with v-if on the same element.

D Because the items array is empty.

💡 Hint

Check the values of the visible property in the data.

All items have visible: false, so v-if prevents rendering any list item.

❓ state_output

expert

What is the rendered output with nested v-for and v-if precedence?

Consider this Vue template:

<ul>
  <li v-for="group in groups" :key="group.id">
    <h3>{{ group.name }}</h3>
    <ul>
      <li v-for="item in group.items" v-if="item.active" :key="item.id">{{ item.label }}</li>
    </ul>
  </li>
</ul>

Given data:

groups = [
  { id: 1, name: 'Group 1', items: [
    { id: 'a', label: 'Item A', active: true },
    { id: 'b', label: 'Item B', active: false }
  ]},
  { id: 2, name: 'Group 2', items: [
    { id: 'c', label: 'Item C', active: false },
    { id: 'd', label: 'Item D', active: true }
  ]}
]

What will be the rendered HTML?

Vue

<ul>
  <li v-for="group in groups" :key="group.id">
    <h3>{{ group.name }}</h3>
    <ul>
      <li v-for="item in group.items" v-if="item.active" :key="item.id">{{ item.label }}</li>
    </ul>
  </li>
</ul>

A <ul><li><h3>Group 1</h3><ul><li>Item A</li></ul></li><li><h3>Group 2</h3><ul><li>Item D</li></ul></li></ul>

B <ul><li><h3>Group 1</h3><ul><li>Item A</li><li>Item B</li></ul></li><li><h3>Group 2</h3><ul><li>Item C</li><li>Item D</li></ul></li></ul>

C <ul><li><h3>Group 1</h3><ul></ul></li><li><h3>Group 2</h3><ul></ul></li></ul>

D <ul><li><h3>Group 1</h3><ul><li>Item B</li></ul></li><li><h3>Group 2</h3><ul><li>Item C</li></ul></li></ul>

💡 Hint

Remember v-if filters items inside each group's items array.

Only items with active: true render inside each group's list. Group 1 shows Item A, Group 2 shows Item D.