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 in story" class="list-group-item"> {{$index}} : {{$key}} : {{ value }} </li> </ul> </div> new Vue({ el:...