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

Need a 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

Need a 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'

Need a 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'

Need a hint?

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