Vue — Lists

Basic v-for

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' }
      ]
    }
  }
}
</script>

With index

<div v-for="(item, index) in items" :key="item.id">
  {{ index }}. {{ item.name }}
</div>

Object iteration

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

Number iteration

<span v-for="n in 5" :key="n">{{ n }} </span>
<!-- Output: 1 2 3 4 5 -->

Key attribute

<!-- Always use key for efficiency -->
<li v-for="item in items" :key="item.id">
  {{ item.name }}
</li>

<!-- Avoid using index as key -->
<li v-for="(item, index) in items" :key="index">
  {{ item.name }}
</li>

Nested lists

<div v-for="category in categories" :key="category.id">
  <h3>{{ category.name }}</h3>
  <ul>
    <li v-for="item in category.items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</div>

v-for with v-if

<!-- Not recommended together -->
<li v-for="item in items" v-if="item.active" :key="item.id">
  {{ item.name }}
</li>

<!-- Better: use computed -->
<li v-for="item in activeItems" :key="item.id">
  {{ item.name }}
</li>

Component v-for

<my-component
  v-for="item in items"
  :key="item.id"
  :item="item"
></my-component>

Mini Practice

1. Render a list of items
2. Add index to iteration
3. Iterate over object properties
4. Use keys for performance

Up Next

Continue with Methods - Event handling.