O'Reilly logo

The Majesty of Vue.js by Kostas Maniatis, Alex Kyriakidis

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

v-for

In order to loop through each item in an array, we will use the v-for Vue's directive.

The v-for loop works on arrays/objects and is used to loop through each item in an array. This directive requires a special syntax in the form of item in array where array is the source data array and item is an alias for the array element being iterated on.

Note

If you are coming from the PHP world you may notice that v-for is similar to PHP's foreach function. But be careful if you are used to foreach($array as $value).

Vue's v-for is exactly the opposite, value in array. The singular first, the plural next.

Range v-for

Directive v-for can also take an integer. Whenever a number is passed instead of an array/object, the template will be repeated as many times ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required