Vue Index

Posted on  by admin
You’re browsing the documentation for v2.x and earlier.

For v3.x, click here. We can use the v-for directive to render a list of items based on an array.

The v-for directive requires a special syntax in the form of item in items, where items is the source data array and item is an alias for the array element being iterated on:.


You can also use of as the delimiter instead of in, so that it is closer to JavaScript’s syntax for iterators:.

You can also use v-for to iterate through the properties of an object.

You can also provide a second argument for the property’s name (a.k.a. And another for the index:.

When iterating over an object, the order is based on the enumeration order of Object.keys(), which is not guaranteed to be consistent across JavaScript engine implementations.


This is similar to the behavior of track-by="$index" in Vue 1.x.

This default mode is efficient, but only suitable when your list render output does not rely on child component state or temporary DOM state (e.g.

form input values). To give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item:.

It is recommended to provide a key attribute with v-for whenever possible, unless the iterated DOM content is simple, or you are intentionally relying on the default behavior for performance gains.


Don’t use non-primitive values like objects and arrays as v-for keys.

Use string or numeric values instead.


You can open the console and play with the previous examples’ items array by calling their mutation methods.

Gufran HasanGufran Hasan
filter(), concat() and slice(), which do not mutate the original array but always return a new array.

A clearer Vue