Vue List Rendering Explained — v-for Directives Deep Dive

In this tutorial, you will learn about Vue List Rendering Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Vue's v-for directive renders lists by iterating over arrays, objects, or ranges. Combined with key, it efficiently updates the DOM when lists change.

What You'll Learn

• v-for syntax for arrays and objects
• The key attribute and why it matters
• Array mutation and replacement
• Filtering and sorting with computed
• v-for with template and component

Why It Matters

List rendering is used in nearly every application. Proper key usage prevents rendering bugs and improves performance by helping Vue identify which elements changed.

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="item.id">
        {{ index + 1 }}. {{ item.name }} — ${{ item.price }}
      </li>
    </ul>

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

    <h2>Countdown</h2>
    <span v-for="n in 5" :key="n">{{ n }} </span>
  </div>
</template>

<script setup>
import { ref } from "vue";

const items = ref([
  { id: 1, name: "Laptop", price: 999 },
  { id: 2, name: "Mouse", price: 25 },
  { id: 3, name: "Keyboard", price: 75 },
]);

const user = ref({ name: "Alice", role: "Admin", email: "alice@example.com" });
</script>

Expected output: Three lists rendered: items with index, object key-value pairs, and a numeric range countdown.