v-for for list rendering in Vue

Introduction

The v-for directive helps you show many items on the page by repeating a template for each item in a list.

Showing a list of tasks in a to-do app.

Displaying a menu with many food items.

Rendering a list of comments under a blog post.

Showing a gallery of photos.

Listing user names in a chat app.

Syntax

Vue

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

<script setup>
import { ref } from 'vue'
const items = ref([{ id: 1, text: 'Example' }])
</script>

Always add a unique :key to each item for better performance and to help Vue track items.

You can use v-for="(item, index) in items" to get the item's position too.

Examples

Looping over a simple array of strings. Each fruit name is shown as a list item.

Vue

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

Looping over an array of objects. Shows the position number and user name.

Vue

<ul>
  <li v-for="(user, index) in users" :key="user.id">
    {{ index + 1 }}. {{ user.name }}
  </li>
</ul>

When the list is empty, nothing is shown on the page.

Vue

<ul>
  <li v-for="item in []" :key="item.id">
    {{ item.text }}
  </li>
</ul>

Sample Program

This Vue component shows a shopping list. It uses v-for to repeat each product as a list item with its name and quantity.

Vue

<template>
  <div>
    <h2>My Shopping List</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - {{ product.quantity }} pcs
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const products = ref([
  { id: 101, name: 'Apples', quantity: 5 },
  { id: 102, name: 'Bananas', quantity: 3 },
  { id: 103, name: 'Carrots', quantity: 4 }
])
</script>

Important Notes

Time complexity: Rendering with v-for is proportional to the number of items in the list.

Space complexity: Uses memory for the list and the rendered elements.

Always use a unique :key to avoid rendering bugs and improve updates.

Use v-for when you want to show many similar items. For single items, just use normal bindings.

Summary

v-for repeats a template for each item in a list.

Always add a unique :key for each item.

You can access the item and its index in the loop.