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.

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 <main> tag using the <ul> (unordered list) tag:

<main>
    <h1>List of Users:</h1>
    <ul>
        <li>user01</li>
        <li>user02</li>
        <li>user03</li>
        <li>user04</li>
    </ul>
</main>

While this update will display a list of users:

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.

In the HTML code, the data is a list of users. In the Vue (JavaScript) code, the data is an array of users.

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

<!-- Vue Code -->
<script type="text/javascript">
  const app = Vue.createApp({
    data() {
      return {
        navTitle: 'Vue Course',
        footerMessage: 'testdriven.io',
        users: [
          'user1',
          'employee17',
          'Bob',
          'Sara',
          'Garfield'
        ]
      }
    }
  });

  const mountedApp = app.mount('#vue-app')
</script>

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

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

<main>
    <h1>List of Users:</h1>
    <ul>
        <li v-for="user in users" v-bind:key="user">{{ user }}</li>
    </ul>
</main>

The v-for directive is used to display the array of users within each <li> 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 of specifying how to loop through an array.

When using the v-for directive, it's recommended to specify a unique key attribute for each item using v-bind:key="user". This approach helps when doing more complex operations with the v-for directive, such as re-ordering a list.

The v-bind directive will be covered in more detail in an upcoming chapter.

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's what the webpage looks like when it displays the list:

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 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:

<main>
    <h1>List of Users:</h1>
    <ul>
        <li v-for="(user, index) in users" v-bind:key="user">{{ index }}: {{ user }}</li>
    </ul>
</main>

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:

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.