How does v-for work?

VueJunior~1 min read

v-for is a Vue directive used to render lists: arrays, objects, numbers, and even the results of iterators.

In simpler terms:

v-for repeats a template for each item in a collection.

Basic syntax

html

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

data() {
  return {
    items: ['A', 'B', 'C']
  }
}

The result is three <li> elements.

html

<li v-for="(item, index) in items">
  {{ index }} - {{ item }}
</li>

Vue requires you to specify :key for correct item tracking:

html

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

Why?

html

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

The order is: (value, key, index).

html

<div v-for="n in 5">{{ n }}</div>

This outputs the digits 1-5.

For grouping:

html

<template v-for="item in list" :key="item.id">
  <h3>{{ item.title }}</h3>
  <p>{{ item.text }}</p>
</template>

<template> itself is not rendered in the DOM.

You cannot put both on the same element (Vue 3):

html

<li v-for="item in items" v-if="item.visible">Not allowed</li>

But you can through <template>:

html

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

Or, better, filter beforehand:

visibleItems() {
  return this.items.filter(i => i.visible)
}

html

<div v-for="([key, value]) in Object.entries(obj)" :key="key">
  {{ key }}: {{ value }}
</div>

You can pass the item as props:

html

<UserCard
  v-for="user in users"
  :key="user.id"
  :user="user"
/>

Vue does the following:

Without key, Vue uses in-place patching, which can behave unexpectedly.

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.