Rendering Lists (v-for)

Vue allows you to render lists of data using the v-for directive. This helps display multiple items based on an array.

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

const items = ref(["Apple", "Banana", "Orange"]);
</script>

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

The v-for directive loops through each item in the array and renders an element for each one.

It is recommended to add a unique key for each item.

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

The :key helps Vue efficiently update the list when data changes.

Example with objects:

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

const users = ref([
  { id: 1, name: "John" },
  { id: 2, name: "Emily" }
]);
</script>

<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
</template>

Vue updates the list automatically when the data changes.