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

Array rendering

Looping through an array

In the next example we will set up the following array of stories inside our data object and we will display them all, one by one:

stories: [
    "I crashed my car today!",
    "Yesterday, someone stole my bag!",
    "Someone ate my chocolate...",
] 

What we need to do here, is to render a list. Specifically, an array of strings:

<html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.cs\ s" rel="stylesheet"> <title>Stories</title> </head> <body> <div class="container"> <h1>Let's hear some stories!</h1> <div> <ul class="list-group"> <li v-for="story in stories" class="list-group-item"> Someone said "{{ story }}" </li> </ul> </div> <pre> {{$data | json}} </pre> </div> </body> <script ...

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