🔁 Vue v-for – Looping Through Lists and Data (2025 Guide)

---

🧲 Introduction – What is v-for in Vue?

Vue.js offers powerful tools for rendering lists and collections, and v-for is at the heart of that capability. Whether you’re displaying arrays, looping through objects, or rendering dynamic components, v-for provides a declarative and efficient way to iterate through data.

🎯 In this guide, you’ll learn:

• The syntax and purpose of the v-for directive
• How to loop through arrays, objects, and ranges
• Why keys are important in v-for
• Real-world examples and performance best practices

---

📘 What is the v-for Directive?

The v-for directive allows you to render a list of items by iterating over arrays or objects. It’s Vue’s equivalent of a for loop, but used within templates.

✅ Basic Syntax:

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

🧠 Explanation:

• items is a data array
• item represents each individual element in the array during the loop

---

🧪 Example – Looping Through an Array

<template>
  <ul>
    <li v-for="fruit in fruits" :key="fruit">{{ fruit }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  }
}
</script>

🧠 Result: Displays each fruit as a list item.
The :key="fruit" helps Vue optimize DOM rendering.

---

🧩 Accessing Index in v-for

You can also access the index (position) of each item:

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

---

📦 Iterating Over Objects

You can loop through object properties using this syntax:

<ul>
  <li v-for="(value, key) in user" :key="key">
    {{ key }}: {{ value }}
  </li>
</ul>

<script>
export default {
  data() {
    return {
      user: {
        name: 'Alice',
        age: 28,
        email: 'alice@example.com'
      }
    }
  }
}
</script>

🧠 You can use:

• value – The value of the property
• key – The name of the property

---

🔢 Rendering a Range (Like a Loop)

You can use v-for with a number to loop a fixed number of times:

<div v-for="n in 5" :key="n">
  This is item #{{ n }}
</div>

🧠 Result: Outputs 5 divs, numbered from 1 to 5.

---

🔀 Why Use Keys in v-for?

Always provide a :key when using v-for. Vue uses this to:

• Track element identity
• Optimize updates and re-renders
• Avoid rendering bugs and performance issues

Use unique identifiers (like id) instead of array indexes when possible:

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

---

🧬 Nested v-for Loops

You can nest loops for multi-level data:

<div v-for="category in categories" :key="category.id">
  <h3>{{ category.name }}</h3>
  <ul>
    <li v-for="product in category.products" :key="product.id">{{ product.name }}</li>
  </ul>
</div>

---

⚠️ Using v-if and v-for Together

Vue recommends not using v-if on the same element as v-for. If needed, use a <template> tag:

<template v-for="item in items">
  <p v-if="item.visible" :key="item.id">{{ item.name }}</p>
</template>

---

💡 Real-World Use Case – Comment Section

<div v-for="comment in comments" :key="comment.id" class="comment">
  <h4>{{ comment.author }}</h4>
  <p>{{ comment.text }}</p>
</div>

This is perfect for rendering dynamic lists such as comments, posts, or tasks from an API.

---

📌 Summary – Recap & Next Steps

The v-for directive is your go-to tool for rendering dynamic lists in Vue. With support for arrays, objects, and ranges, it keeps your UI reactive and cleanly synced with your data.

🔍 Key Takeaways:

• Use v-for to loop through data in templates
• Always include a unique :key
• Loop over arrays, objects, or numeric ranges
• Use <template> when combining with v-if

⚙️ Real-World Relevance:
Whether you’re rendering tables, dropdowns, search results, or dashboards—v-for is a daily tool for Vue developers.

---

❓ FAQ Section

❓ What does v-for do in Vue?

✅ It renders a list of elements by looping through an array, object, or number using a declarative syntax.

---

❓ How do I get the index in v-for?

✅ Use (item, index) in the directive:

<div v-for="(item, index) in items">{{ index }}</div>

---

❓ Why should I use key with v-for?

✅ The :key helps Vue track elements, improve performance, and avoid bugs during updates or reordering.

---

❓ Can I loop through an object with v-for?

✅ Yes. Use (value, key):

<li v-for="(val, key) in obj">{{ key }}: {{ val }}</li>

---

❓ Can I use v-if and v-for on the same element?

✅ It’s possible but not recommended. Instead, wrap it in a <template>:

<template v-for="item in items">
  <p v-if="item.show">{{ item.name }}</p>
</template>

---

Share Now :