v-for for list rendering in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be rendered by this Vue template?

Consider the following Vue 3 template snippet using v-for:

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

Given the data:

items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
]

What will be the rendered HTML inside the <ul>?

Vue

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

A <ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul>

B <ul><li>1</li><li>2</li><li>3</li></ul>

C <ul><li>item.name</li><li>item.name</li><li>item.name</li></ul>

D <ul><li>Apple Banana Cherry</li></ul>

💡 Hint

Remember that v-for repeats the element for each item in the list, and {{ item.name }} outputs the name property.

The v-for directive loops over each object in the items array. For each object, it creates an <li> element showing the name property. So the list items are Apple, Banana, and Cherry.

📝 Syntax

intermediate

Which option correctly uses v-for with index?

In Vue 3, you want to render a list of names with their index number. Which of the following v-for syntaxes is correct?

A <li v-for="index, name in names" :key="index">{{ index }} - {{ name }}</li>

B <li v-for="name, index in names" :key="index">{{ index }} - {{ name }}</li>

C <li v-for="name of names, index" :key="index">{{ index }} - {{ name }}</li>

D <li v-for="(name, index) in names" :key="index">{{ index }} - {{ name }}</li>

💡 Hint

Remember the syntax for v-for with index is (item, index) in list.

The correct syntax for v-for with index is (item, index) in list. Option D follows this pattern correctly.

🔧 Debug

advanced

Why does this v-for cause a warning?

Look at this Vue 3 template snippet:

<div v-for="item in items">
  {{ item.text }}
</div>

Given items is an array of objects, Vue shows a warning about missing key. Why?

Vue

<div v-for="item in items">
  {{ item.text }}
</div>

A Because each element rendered by v-for needs a unique :key attribute for Vue to track changes efficiently.

B Because the items array is empty and v-for cannot render anything.

C Because the syntax of v-for is incorrect and missing parentheses.

D Because the item.text property is undefined in the objects.

💡 Hint

Vue requires a special attribute on elements inside v-for loops to help with updates.

Vue requires a unique :key attribute on elements inside v-for loops. This helps Vue identify each element when the list changes, improving performance and avoiding rendering bugs. Without it, Vue shows a warning.

❓ state_output

advanced

What is the value of selected after clicking the second item?

Given this Vue 3 component snippet:

<template>
  <ul>
    <li v-for="(item, idx) in items" :key="item.id" @click="selected = idx">
      {{ item.name }}
    </li>
  </ul>
  <p>Selected: {{ selected }}</p>
</template>

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

const items = [
  { id: 1, name: 'Red' },
  { id: 2, name: 'Green' },
  { id: 3, name: 'Blue' }
]
const selected = ref(null)
</script>

If the user clicks the second list item (Green), what will be displayed in the <p>Selected:</p> paragraph?

A Selected: Green

B Selected: 2

C Selected: 1

D Selected: null

💡 Hint

The click sets selected to the index of the clicked item.

The @click handler sets selected to the index idx of the clicked item. The second item has index 1 (zero-based), so selected becomes 1.

🧠 Conceptual

expert

Why is using array index as :key in v-for discouraged?

In Vue 3, you can use :key to help Vue track list items. Why is it generally discouraged to use the array index as the key?

A Because Vue does not allow numeric keys and will throw an error.

B Because using index as key can cause rendering bugs when the list order changes or items are added/removed.

C Because keys must be strings and index is a number.

D Because using index as key slows down rendering performance significantly.

💡 Hint

Think about what happens if the list changes order but keys stay the same.

Using the array index as the key can cause Vue to reuse DOM elements incorrectly when the list changes order or items are inserted/removed. This can lead to bugs like wrong item updates or lost input focus. It's better to use a unique identifier from the data.

Practice

1. What does the v-for directive do in Vue.js?

easy

A. It repeats an element or component for each item in a list.

B. It conditionally shows or hides an element.

C. It binds a value to an input element.

D. It listens for user events like clicks.

Solution

1. Step 1: Understand the purpose of v-for

   The v-for directive is used to loop over arrays or objects and render elements multiple times.

2. Step 2: Compare with other directives

   Other directives like v-if control visibility, v-bind binds data, and v-on listens to events, so they do not repeat elements.

3. Final Answer:

   It repeats an element or component for each item in a list. -> Option A

4. Quick Check:

   v-for = repeat elements [OK]

Hint: Remember: v-for means 'for each' in a list [OK]

Common Mistakes:

• Confusing v-for with v-if for conditional rendering
• Thinking v-for binds data instead of looping
• Mixing v-for with event listeners like v-on

2. Which of the following is the correct syntax to render a list of items using v-for in Vue?

easy

A. <li v-for="item of items">{{ item }}</li>

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

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

D. <li v-for="items of item">{{ items }}</li>

Solution

1. Step 1: Identify correct v-for syntax

   The correct syntax is v-for="item in items" where items is the array and item is the loop variable.

2. Step 2: Check each option

   <li v-for="item in items">{{ item }}</li> uses correct syntax and variable names. Options B, C, and D have incorrect order or variable names.

3. Final Answer:

   <li v-for="item in items">{{ item }}</li> -> Option C

4. Quick Check:

   Use v-for="item in items" [OK]

Hint: Use 'item in items' to loop correctly [OK]

Common Mistakes:

• Swapping 'item' and 'items' in the syntax
• Using 'of' instead of 'in' (Vue uses 'in')
• Using plural for loop variable instead of singular

3. Given the Vue template:

<ul>
  <li v-for="(fruit, index) in fruits" :key="index">{{ index }} - {{ fruit }}</li>
</ul>

and the data:

fruits: ['Apple', 'Banana', 'Cherry']

What will be the rendered output?

medium

A. index - fruitindex - fruitindex - fruit

B. Apple - 0Banana - 1Cherry - 2

C. AppleBananaCherry

D. 0 - Apple1 - Banana2 - Cherry

Solution

1. Step 1: Understand the loop variables

   The v-for uses (fruit, index) in fruits, so index is the position and fruit is the item.

2. Step 2: Substitute values in template

   Each
3. shows "index - fruit". For the array ['Apple', 'Banana', 'Cherry'], indexes are 0,1,2 respectively.

4. Final Answer:

   <ul><li>0 - Apple</li><li>1 - Banana</li><li>2 - Cherry</li></ul> -> Option D

5. Quick Check:

   Index and fruit displayed correctly [OK]

Hint: Remember: (item, index) in list shows index first [OK]

Common Mistakes:

• Mixing order of index and item in output
• Forgetting to use :key with index
• Assuming 'of' works instead of 'in'

4. What is wrong with this Vue template snippet?

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

Given the data:

items: null

What will happen when Vue tries to render this?

medium

A. It will render nothing without error.

B. It will throw a runtime error because items is null.

C. It will render one empty list item.

D. It will render the string 'null' inside a list item.

Solution

1. Step 1: Understand v-for expects iterable data

   The v-for directive requires an array or object to loop over. If items is null, it is not iterable.

2. Step 2: Predict Vue behavior on null

   Vue will throw a runtime error because it cannot iterate over null.

3. Final Answer:

   It will throw a runtime error because items is null. -> Option B

4. Quick Check:

   v-for needs iterable data [OK]

Hint: v-for needs arrays or objects, not null [OK]

Common Mistakes:

• Assuming null renders empty list silently
• Expecting v-for to handle null gracefully
• Confusing null with empty array []

5. You have a nested array of user objects grouped by city:

const usersByCity = {
  'New York': [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }],
  'Paris': [{ id: 3, name: 'Claire' }]
}

How do you use v-for to render a list showing city names and their users' names inside each city?

hard

A. <div v-for="(users, city) in usersByCity" :key="city">
<h3>{{ city }}</h3>
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
</div>

B. <div v-for="city in usersByCity" :key="city">
<h3>{{ city }}</h3>
<ul>
<li v-for="user in city" :key="user.id">{{ user.name }}</li>
</ul>
</div>

C. <div v-for="(city, users) in usersByCity" :key="city">
<h3>{{ city }}</h3>
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
</div>

D. <div v-for="user in usersByCity" :key="user.id">
<h3>{{ user.city }}</h3>
<ul>
<li>{{ user.name }}</li>
</ul>
</div>

Solution

1. Step 1: Understand the data structure

   usersByCity is an object where keys are city names and values are arrays of user objects.

2. Step 2: Use v-for to loop over object entries

   Use v-for="(users, city) in usersByCity" to get city name and users array. Then loop over users array inside.

3. Step 3: Check options for correct variable order and keys

   <div v-for="(users, city) in usersByCity" :key="city"> <h3>{{ city }}</h3> <ul> <li v-for="user in users" :key="user.id">{{ user.name }}</li> </ul> </div> correctly uses (users, city) and nested v-for with keys. <div v-for="(city, users) in usersByCity" :key="city"> <h3>{{ city }}</h3> <ul> <li v-for="user in users" :key="user.id">{{ user.name }}</li> </ul> </div> swaps city and users order incorrectly. Options B and D misuse variables.

4. Final Answer:

   Option A code snippet correctly renders cities and their users. -> Option A

5. Quick Check:

   Object loop: (value, key) = (users, city) [OK]

Hint: For objects, v-for uses (value, key) in object [OK]

Common Mistakes:

• Swapping key and value order in v-for
• Using array syntax for object iteration
• Missing unique :key on nested loops