List Rendering with v-for

Snippet

List Rendering with v-for

The v-for directive allows you to render a list of items based on an array. It requires a special syntax 'item in items' and should always include a unique :key for performance and stability.

snippet.js
javascript
<template>
  <ul>
    <li v-for="fruit in fruits" :key="fruit.id">
      {{ fruit.name }}
    </li>
  </ul>
</template>

vue

Breakdown

v-for="fruit in fruits"

Iterates through the fruits array, assigning each element to the fruit variable.

:key="fruit.id"

Provides a unique identifier for Vue to track each node's identity.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

List Rendering with v-for

Related