Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Displaying, Looping, Searching, and Filtering Data Chapter 2

v-for and displaying our data

The next HTML declaration means we can start displaying our data and putting some of

these attributes into practice. As our data is an array, we will need to loop through it to
display each element. To do this, we will use the v-for directive.

Generate your JSON and assign it to a variable called people. During these examples, the

generated JSON loop will be displayed in the code blocks as [...]. Your Vue app should

look like the following:

const app = new Vue({

el: '#app',

data: {

people: [...]

}

});

We now need to start displaying each person's name in our View as a bulleted list. This is

where the v-for directive comes in:

<div id="app">

<ul>

<li v-for="person in people">

{{ person }}

</li>

</ul>

</div>

The v-for loops through the JSON list and for every entry temporarily assigns it

the person variable. We can then output the value or attributes of the variable.

The v-for loop needs to be applied to the HTML element you want to be repeated, in this

case,