v-for for list rendering in Vue - Mini Project: Build & Apply

Rendering a List with v-for in Vue

📖 Scenario: You are building a simple Vue app that shows a list of fruits on a webpage. You want to display each fruit name as a list item.

🎯 Goal: Create a Vue component that uses v-for to render a list of fruit names inside an unordered list.

📋 What You'll Learn

Create a reactive array called fruits with the exact values: 'Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'.

Create a variable called listId with the value 'fruit-list' to use as the id attribute of the list.

Use v-for with the variable fruit and index i to render each fruit inside an <li> element.

Add the :key attribute to each <li> using the index variable i.

Set the id attribute of the <ul> element to the variable listId.

💡 Why This Matters

🌍 Real World

Rendering lists dynamically is common in web apps, like showing products, messages, or tasks.

💼 Career

Understanding <code>v-for</code> is essential for Vue developers to build interactive and efficient user interfaces.

1

Create the fruits array

Create a reactive array called fruits with these exact string values: 'Apple', 'Banana', 'Cherry', 'Date', and 'Elderberry' inside the <script setup> block.

Vue

  



// Create the reactive array fruits here
// Your code here

Hint

Use ref from Vue to create a reactive array named fruits with the given fruit names.

2

Add a listId variable

Inside the <script setup> block, create a constant called listId and set it to the string 'fruit-list'.

Vue

  



import { ref } from 'vue'

const fruits = ref(['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'])
// Create the constant listId here
// Your code here

Hint

Just create a constant string variable named listId with the value 'fruit-list'.

3

Render the list with v-for

In the <template>, add an unordered list <ul>. Use v-for with variables fruit and i to loop over fruits. Inside the loop, create <li> elements that display the fruit name. Add :key="i" to each <li>.

Vue

  
  



import { ref } from 'vue'

const fruits = ref(['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'])
const listId = 'fruit-list'

Hint

Use v-for="(fruit, i) in fruits" on the <li> and bind :key="i".

4

Add id attribute to the list

Add the :id="listId" binding to the <ul> element in the template so the list has the id from the listId variable.

Vue

  
    
    {{ fruit }}
  



import { ref } from 'vue'

const fruits = ref(['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'])
const listId = 'fruit-list'

Hint

Bind the id attribute of <ul> to the variable listId using :id="listId".

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