Looping through arrays

In this post, we will be taking a look at looping through arrays, both with simple values and objects. We will be looping through the data properties that I have already added to the Vue instance; one is an array of strings representing movie titles, and the other is an array of objects, representing employees. In Vue.js, we use the v-for directive for looping, so let’s get going.

First, I will output the movie titles in an unordered list, so I will begin by adding a ul element with one nested li element.

<div id="app">
  <h1>Movies</h1>

  <ul>
    <li></li>
  </ul>
</div>

The v-for directive renders the element that it is attached to zero or more times, based on its source data. Because I want to render one li element for each movie title, I will add the directive to the li element.

<div id="app">
  <ul>
    <li v-for=""></li>
  </ul>
</div>

The v-for directive takes a special syntax. The simplest form is “alias in expression“. The expression is what we have seen before and can be many things, but in most cases, we refer to a data property consisting of an array. In this case, we want to loop through the array stored in the movieTitles data property, so we enter movieTitles.

<div id="app">
  <ul>
    <li v-for="title in movieTitles"></li>
  </ul>
</div>

The alias is the part before the in keyword and is the name with which we can refer to the current iteration’s item. We can use this for string interpolation to output each movie title.

<li v-for="title in movieTitles">{{ title }}</li>

What this means is that the li element will be repeated for each item in the array stored within the movieTitles property. For each iteration, we can access the current item using the title alias, and we output that using string interpolation.

If I run the code now, we should see a list of movie titles being output.

One could also have nested elements within the element that contains the v-for directive, as this element and any child elements are repeated as many times as the result of the expression.

Looping through objects

We have just seen how we can loop through an array of scalar values, so let’s see another example which loops through an array of objects, namely the employees array. We will display the employees in a table, and because the markup is quite verbose and long, I will just paste it in so you don’t have to watch me type it.

<table border="1">
    <thead>
      <tr>
        <th>Name</th>
        <th>Title</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>

This is a simple table that has nothing special about it. Within this table, we want to repeat the tr element within tbody for each employee, so that is where we will be adding the v-for directive.

Since we will be iterating through a collection of employees, we will refer to each employee as employee, which is the alias for the current iteration’s item. Then we use the in keyword to separate the alias and the expression. The last part is the expression, which will simply be the name of the employees data property in this case.

<tr v-for=”employee in employees”>

For each iteration of the loop, we can now access the properties on the employee alias as we would normally access properties on an object in JavaScript.

<td>{{ employee.name }}</td>
<td>{{ employee.title }}</td>

Notice that the children of the tr element are repeated for each iteration of the loop as well, because it is the tr element that has the v-for directive. So any children of that element are repeated as well.

Alright, time to take it for a spin. Now we see an HTML table displaying the employees from the employees data property. Excellent!

Not only can we access the current item in the loop; within a v-for block, we have full access to the parent scope, such as other data properties. To show this, I will add a new data property containing the name of an imaginary company.

companyName: 'VueX Ltd.'

Notice how this property is in the root of the data object, and that despite of this, we will still be able to access it within our loop.

I will add a new header to the table and use normal string interpolation to output the company name.

<th>Company</th>

<td>{{ companyName }}</td>

As you can see, there is nothing new here; it is just to show that you still have access to the parent scope within a v-for block.

As a side note, remember how we could use the HTML5 template element with the v-if directive for rendering a group of multiple elements without affecting the markup? You can do the same by simply adding the v-for directive to a template element, exactly as we did in the lecture on the v-if directive.

With that, it’s time to see how we can access the index of the current iteration of a loop.