v-for with objects in Vue

Introduction

The v-for directive lets you repeat elements for each item in an object. It helps show lists or tables easily.

You want to display all keys and values from an object in a list.

You have user data stored as an object and want to show each property on the page.

You need to loop over settings or configuration stored as an object to create a form.

You want to create a table row for each property in an object.

Syntax

Vue

<element v-for="(value, key, index) in object" :key="key">{{ key }}: {{ value }}</element>

You can access the value, key, and index (position) in the loop.

Always add a unique :key to help Vue track elements efficiently.

Examples

Loop over userInfo object showing each key and value in a list item.

Vue

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

Access index i along with key and value to show position in the list.

Vue

<div v-for="(val, k, i) in settings" :key="k">{{ i }} - {{ k }}: {{ val }}</div>

Sample Program

This Vue component shows a list of user details by looping over the user object with v-for. Each key and value is displayed in a list item.

Vue

<template>
  <section>
    <h2>User Details</h2>
    <ul>
      <li v-for="(value, key) in user" :key="key">
        <strong>{{ key }}</strong>: {{ value }}
      </li>
    </ul>
  </section>
</template>

<script setup>
const user = {
  name: 'Alice',
  age: 30,
  city: 'Paris'
}
</script>

Important Notes

Objects do not guarantee order, so keys may appear in any order.

Use v-for with objects when you want to display all properties dynamically.

Summary

v-for can loop over objects using (value, key, index) syntax.

Always provide a unique :key for each item.

This helps display object data easily in lists or tables.