v-for Directive

Part 1, Chapter 5


In this chapter, we'll learn about the v-for directive which is used for displaying arrays of data.

Source Code

All of the code for this course is stored on GitLab in the following repository:

vue-crud-course-code on GitLab

Part I (Vue Fundamentals) of this course has a corresponding branch (part1_vue_fundamentals) in the repository.

Displaying a List of Data

In this chapter, we'll explore how to display a list of data using Vue.

To start, let's look at how we can create a list of users in HTML. We can add a list of users in the <div> tag with a class of data-content using the <ul> (unordered list) tag:

<div class="data-content">
    <h1>List of Users:</h1>
    <br>
    <ul>
        <li>user01</li>
        <li>user02</li>
        <li>user03</li>
        <li>user04</li>
    </ul>
</div>

While this update will display a list of users:

Display a List using HTML

This does not provide a very flexible solution if our data were to change.

Let's make this more flexible with the power of Vue...

Displaying a List in Vue

Vue makes it very easy to display a list of data by providing the v-for directive.

What is a directive in Vue?

The term directive is used quite frequently when discussing Vue. A directive is a special token that you can put in your markup (ie. your HTML code) to tell Vue to do something.

In Vue, directives start with the 'v-' prefix.

The v-for directive will take an array and display them as a list.

Before we can use the v-for directive, we need to create a new property in the data element of the Vue instance that stores the list of users:

<script type="text/javascript">
  var vm = new Vue({
    el: '#vue_app',
    data: {
      navTitle: 'Vue Course',
      footerMessage: 'testdriven.io (2019)',
      users: [
        'user1',
        'employee17',
        'Bob',
        'Sara',
        'Garfield',
      ],
    },
  });
</script>

Now there is an array called users which contains 5 users (user1, employee17, Bob, Sara, and Garfield).

In order to display this array, we need to use the v-for directive in our HTML code:

<div class="data-content">
    <h1>List of Users:</h1>
    <br>
    <ul v-for="user in users">
        <li>{{ user }}</li>
    </ul>
</div>

The v-for directive is used to display the array of users within the <ul> tag. The v-for directive requires a special syntax (user in users) to display the array. This special syntax is saying to loop through each element (i.e. user) in the array (in users). This syntax can take some getting used to, but it's a convenient way for specifying how to loop through an array.

The v-for directive provides a looping function and for each element (user), that user should be displayed as a list item (the <li> tag). From the previous chapter, we learned that a property from our Vue instance can be displayed using the {{ }} format (i.e. the double curly brackets).

Here is what the webpage looks like when it displays the list:

Display a List using Vue

More About the v-for Directive

We just discussed how the v-for directive can be used to loop through an array to display data, but let's take it one step further to really illustrate this looping.

In addition to the username, we're going to expand what is displayed to include the index of the user within the array:

<div class="data-content">
    <h1>List of Users:</h1>
    <br>
    <ul v-for="(user, index) in users">
        <li>{{ index }}: {{ user }}</li>
    </ul>
</div>

In addition to the current element (user) in the array (users), the index of that element is also being provided for use in the <li> tag.

Here's what the webpage looks like now:

Display a List with Indices in Vue

Summary

In this chapter, the v-for directive was used to display a list of users. This list of users was specified as a new property in the data element of our Vue instance. The v-for directive provides a very convenient method for easily displaying elements from an array.




Mark as Completed