issuhub.com

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

(singke) #1 
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,

  • . If you don't have a wrapping element or don't wish to use the HTML you can


    use the Vue