VueJs rendering lists – v-for

This entry is part 5 of 7 in the series VueJs

Well we are onto our next post in this VueJs series and we shall tackle rendering lists in vue using the v-for directive. We will work our way up further and further in this series but before you can run you must learn to walk and so this week we will look at outputting arrays/objects of data in javascript using vue.

Vue has a lot of similarities with Angular so if you are coming from an angular background, you are going to find this rather straightforward to pick up. If you have never used Angular then you are going to need a bit of info on directives, in short directives add functionality to html by adding special syntax to html elements. Quick example:

<div v-my-directive="someValue"></div>

So although this actually is a custom directive (we will create them in a later lesson), VueJs ships with a set amount of core directives to work with, one of which is the v-for directive. In angular the directive for rendering lists is ng-repeat and in VueJs it works very similar. Lets get some example code together and show you a demonstration!

new Vue({
  el: '#list-example',
  data: {
    items: [
      { name: 'Lukaku' },
      { name: 'Benteke' },
      { name: 'Origi' }
    ]
  }
})
<ul id="list-example">
  <li v-for="item in items">
    {{ item.name }}
  </li>
</ul>

and here is that in a pen:


See the Pen Vuejs by diquinnyonk (@diquinnyonk) on CodePen

How simple is that! Your data is sitting pretty straight on the page.

So that is a nice simple example to showcase, how about we use the previous lessons example of event methods and work that into an example. How about we add a completed attribute that is a boolean on each item in the array. When clicked it goes to the inverse state, we will also add a class to signify this. Example code:

new Vue({
  el: '#list-example',
  data: {
    items: [
      { name: 'Lukaku' },
      { name: 'Benteke' },
      { name: 'Origi' }
    ]
  }
})
<ul id="list-example">
  <li :class="{ 'completed' : item.completed === true }" @click="item.completed = !item.completed" v-for="item in items">
    {{ item.name }}
  </li>
</ul>
.completed {
  background : yellow;
}

So looking at the v-for line you will see we have added a click event, which we covered in the previous lesson. And also the binding for class from another previous lesson. All this will tie up to have the completed class on each list item adding a completed class that will style the background as yellow.
Here is the pen showing this:


See the Pen Vuejs by diquinnyonk (@diquinnyonk) on CodePen

Well isn’t that nice! And again I think you will agree how incredibly simple it is to just get going with Vue, no messing around trying to work out what’s going on, it just works and allows you to get on with your project. So let’s keep learning and working with vue to learn more and more with this wonderful framework.

Series Navigation<< VueJs method and event handlingVuejs – filterBy OrderBy >>



Random Posts