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

Object v-for

You can use v-for to iterate through the properties of an object. We mentioned before that you can bring to display the index of the array, but you can also do the same when iterating an object. In addition to $index, each scope will have access to another special property, $key.

Note

When iterating an object, $index is in the range of 0 ... n-1 where n is the number of object properties.

We have restructured our data to be a single object with 3 attributes this time: plot, writer, and upvotes. As you can see in the preceding example code, we use $key and $index to bring inside the list the key/value pairs, as well as $index of each pair:

<div class="container"> <h1>Let's hear some stories!</h1> <ul class="list-group"> <li v-for="value ...

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