VueJS part 4: Rendering in loop

Introduction

Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In this one, I am covering how to use loops to render content.

Directive v-for

Displaying lists is quite common when building web applications. The problem with it is that most often we don’t know ahead of time how many items there are. And even if we did, repeating all that content manually would be crazy. That is why Vue has the v-for directive. You add it to the element, give it an array of items, and it will render content inside of it for each array element.

v-for example

For example, let's display a list of people with their first name, last name, and dob. Therefore, we need that list in the application data.

{
  data() {
    return {
      people: [
        {
          id: 1,
          firstName: "John",
          lastName: "Doe",
          dob: "01-01-1980"
        },
        {
          id: 1,
          firstName: "Johny",
          lastName: "Doe",
          dob: "01-01-1980"
        },
        {
          id: 1,
          firstName: "James",
          lastName: "Doe",
          dob: "01-01-1980"
        }
      ]
    }
  },
  methods: {}
}

Then to display it in the HTML, it is just a matter of adding it to the v-for directive.

<ul>
    <li v-for="person in people" >
        <div>{{person.firstName}} {{person.lastName}} - {{person.dob}}</div>
    </li>
</ul>

Using index in the loop

It is common to use a current index when looping through the array. And that is something that you can access with the v-for directive. In the code above, you can notice that I used syntax person in people. Other than person, the second argument you can use is index.

<li v-for="(person, index) in people" >
    <div>{{index}}. {{person.firstName}} {{person.lastName}} - {{person.dob}}</div>
</li>

Key attribute

When displaying values in the HTML, Vue will update changed values. However, with the arrays, it is a bit tricky, and you can help Vue to know which elements are updated so they can be properly and efficiently displayed. You do that by adding a key attribute to the element containing the v-for directive. Value for this attribute should be set with the v-bind directive and it should be something unique to that element, like database id.

<li v-for="(person, index) in people" v-bind:key="person.id">
    <div>{{index}}. {{person.firstName}} {{person.lastName}} - {{person.dob}}</div>
</li>

Using the v-if directive with the v-for

If you are displaying only some elements, you should not use the v-for and the v-if directive on the same element. But you can use the v-if on the first element inside of the element using the v-for directive. An alternative to this would be my preferred method, first using the filter method on the data, and then displaying the new filtered array.

<ul>
    <li v-for="(person, index) in people" v-bind:key="person.id">
        <div v-if="index % 2 === 0">{{index}}. {{person.firstName}} {{person.lastName}} - {{person.dob}}</div>
    </li>
</ul>

Using range

A quite common requirement in the building of web applications is to display something for a range of numbers. This is also supported by the v-for directive. The usage difference is that instead of passing an array, you give a maximum number. Then each element in the loop is one number of the range starting with the one.

<ul>
    <li v-for="n in 10">
        {{n}}
    </li>
</ul>

Looping object

Other than looping on arrays, this directive can loop on the object, by giving one of the object properties in each iteration. For an example of this, we can just use one of the elements in the previously used array.

{
  data() {
    return {
      person: {
        id: 1,
        firstName: "John",
        lastName: "Doe",
        dob: "01-01-1980"
      }
  },
  methods: {}
}

Using it in the directive is almost the same as if it were an array. With just one difference. In each iteration, we get three parameters. While in the case of an array, we get the element and the index, in this case, we get property value, property key, and index.

<!--    object -->
<ul>
    <li v-for="(value, key, index) in person">
        {{value}} {{key}} {{index}}
    </li>
</ul>

The code used in this article can be found in my GitHub repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.