Vue v-for Components
Rendering lists and repeating elements
🔁 What is v-for?
The v-for directive renders lists by iterating over arrays or objects. It creates multiple elements from a single template, perfect for displaying dynamic data like user lists, products, or any repeating content efficiently.
<template>
<ul>
<li v-for="fruit in fruits" :key="fruit">
{{ fruit }}
</li>
</ul>
</template>
<script setup>
import { ref } from 'vue'
const fruits = ref(['Apple', 'Banana', 'Orange', 'Mango'])
</script>
Output:
- Apple
- Banana
- Orange
- Mango
v-for Features
Array Iteration
Loop through array items
<div v-for="item in items">
{{ item }}
</div>Key Attribute
Unique identifier for each item
<div v-for="item in items"
:key="item.id">
</div>Index Access
Get the current index
<div v-for="(item, index) in items">
{{ index }}: {{ item }}
</div>Object Iteration
Loop through object properties
<div v-for="(value, key) in obj">
{{ key }}: {{ value }}
</div>🔹 Basic v-for with Array
Render a simple list of items:
<template>
<div>
<h3>My Todo List</h3>
<ul>
<li v-for="todo in todos" :key="todo">
{{ todo }}
</li>
</ul>
</div>
</template>
<script setup>
import { ref } from 'vue'
const todos = ref([
'Learn Vue.js',
'Build a project',
'Master v-for'
])
</script>Output:
My Todo List
- Learn Vue.js
- Build a project
- Master v-for
🔹 v-for with Index
Access the index of each item:
<template>
<div>
<h3>Ranked Players</h3>
<div v-for="(player, index) in players" :key="player">
<strong>#{{ index + 1 }}</strong> - {{ player }}
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const players = ref(['Alice', 'Bob', 'Charlie'])
</script>Output:
Ranked Players
🔹 v-for with Objects
Iterate over array of objects:
<template>
<div>
<div v-for="user in users" :key="user.id" class="user-card">
<h4>{{ user.name }}</h4>
<p>Age: {{ user.age }}</p>
<p>City: {{ user.city }}</p>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const users = ref([
{ id: 1, name: 'John', age: 28, city: 'New York' },
{ id: 2, name: 'Sarah', age: 24, city: 'London' },
{ id: 3, name: 'Mike', age: 32, city: 'Tokyo' }
])
</script>Output:
John
Age: 28
City: New York
Sarah
Age: 24
City: London
Mike
Age: 32
City: Tokyo
🔹 v-for with Components
Render multiple component instances:
<!-- ProductCard.vue -->
<template>
<div class="product">
<h4>{{ name }}</h4>
<p>${{ price }}</p>
</div>
</template>
<script setup>
defineProps({
name: String,
price: Number
})
</script>
<!-- Parent Component -->
<template>
<div>
<ProductCard
v-for="product in products"
:key="product.id"
:name="product.name"
:price="product.price"
/>
</div>
</template>
<script setup>
const products = ref([
{ id: 1, name: 'Laptop', price: 999 },
{ id: 2, name: 'Mouse', price: 29 },
{ id: 3, name: 'Keyboard', price: 79 }
])
</script>Output:
Laptop
$999
Mouse
$29
Keyboard
$79
🔹 v-for with Range
Generate a sequence of numbers:
<template>
<div>
<span v-for="n in 5" :key="n" class="number">
{{ n }}
</span>
</div>
</template>