Vue v-for with Components

🔁 Vue v-for with Components

In Vue.js, you can use Vue v-for with Components to render a list of reusable components dynamically.

This is extremely common in real-world apps (cards, lists, tables, dashboards).

 What Does Vue v-for with Components Mean?

Instead of looping over plain HTML elements, you loop over components.

<user-card v-for="user in users" />

Each loop iteration creates one component instance.

 Basic Example

🧩 Parent Component

<template>
<UserCard
v-for="user in users"
:key="user.id"
:name="user.name"
:email="user.email"
/>
</template><script>
import UserCard from ‘./components/UserCard.vue’export default {
components: { UserCard },
data() {
return {
users: [
{ id: 1, name: “Sanjit”, email: “sanjit@mail.com” },
{ id: 2, name: “Amit”, email: “amit@mail.com” }
]
}
}
}
</script>

🧩 Child Component (UserCard.vue)

<template>
<div class="card">
<h3>{{ name }}</h3>
<p>{{ email }}</p>
</div>
</template><script>
export default {
props: [‘name’, ’email’]
}
</script>

🔑 The key Attribute (VERY IMPORTANT ⚠️)

<UserCard
v-for="user in users"
:key="user.id"
/>

Why key?

  • Helps Vue track components efficiently

  • Prevents rendering bugs

  • Improves performance

✔ Always use a unique ID
❌ Avoid array index if possible

 Passing Whole Object as Prop

Cleaner and scalable.

<UserCard
v-for="user in users"
:key="user.id"
:user="user"
/>
props: {
user: Object
}
<h3>{{ user.name }}</h3>

 Using v-for with <template>

When you want multiple root elements per item.

<template v-for="item in items" :key="item.id">
<h3>{{ item.title }}</h3>
<p>{{ item.desc }}</p>
</template>

📌 <template> does not render in DOM.

v-for with Events in Components

<UserCard
v-for="user in users"
:key="user.id"
:user="user"
@delete="deleteUser(user.id)"
/>

Child:

this.$emit('delete')

v-for + v-if with Components ❌

❌ Bad practice:

<UserCard
v-for="user in users"
v-if="user.active"
/>

✔ Correct approach (computed):

computed: {
activeUsers() {
return this.users.filter(u => u.active)
}
}
<UserCard
v-for="user in activeUsers"
:key="user.id"
/>

 Dynamic Component Lists

<component
v-for="item in items"
:key="item.id"
:is="item.component"
/>

✔ Useful for dashboards & widgets

 Common Use Cases

  • User cards

  • Product lists

  • Blog posts

  • Tables

  • Dashboards

  • Menus

 Common Mistakes ❌

❌ Missing key
❌ Mutating props inside child
❌ Large logic inside template
❌ Using index as key unnecessarily

 Best Practices ✅

✔ Always use :key
✔ Pass objects instead of many props
✔ Use computed for filtering
✔ Keep child components focused
✔ Use emits for actions

 Summary Table

Task Pattern
Render components list v-for="item in items"
Unique identity :key="item.id"
Pass data :item="item"
Handle actions $emit()
Filter list Computed

🏁 Conclusion

Using v-for with components is the backbone of scalable Vue UIs.
Once you master this, you can build dynamic, reusable, and maintainable interfaces easily.

You may also like...