How To Use V-for in Vue

Often times when we are creating an application, the data we use determines what we show to the user. For example, in a to-do application, we may have multiple to-do list items. In Vue, it is easy to display multiple data points through the v-for attribute in our Vue templates.

How To Use V-for in Vue

Let's suppose we have some data we are storing on a single page component. Our .vue document looks a bit like this:

<template>
    <div id="locations">

    </div>
</template>
<script>
export default {
    data() {
        return {
            locations: [
                { name: 'London', date: '11/02/2022', numberOfPeople: 4, complete: true },
                { name: 'Paris', date: '12/01/2022', numberOfPeople: 2, complete: true },
                { name: 'Tokyo', date: '04/06/2021', numberOfPeople: 6, complete: true },
                { name: 'Mumbai', date: '08/10/2021', numberOfPeople: 10, complete: true },
                { name: 'New York', date: '12/12/2022', numberOfPeople: 14, complete: true },
                { name: 'Dubai', date: '10/02/2023', numberOfPeople: 12, complete: false },
                { name: 'Shanghai', date: '04/02/2020', numberOfPeople: 2, complete: true }
            ]
        }
    }
}
</script>

Our intention is to display all of our "location" data in our template. We are using static data here - but v-for is reactive, just like all of Vue. So if an API updates this data, it'll feed through to our template.

In this example, using v-for is a no-brainer. All we have to do is update or <template> tag to loop through each item. Let's take a look at how we'd do that:

<template>
    <div id="locations">
        <div class="location-item" v-for="(item, index) in locations" :key="index">
            <p>We travelled to {{ item.name }} on {{ item.date }} with {{ item.numberOfPeople }} people.</p>
        </div>
    </div>
</template>

After updating our code, we should have something that looks like this:

Example of the v-for loop in Vue.JS
So now all of our data is easily displayed in paragraph form. Our .location-item div fully contains the logic for our v-for loop:

<div class="location-item" v-for="(n, i) in locations" :key="i">

When we say (item, index) in locations, item refers to one item in our loop - so we can call item.name to get London, or Mumbai from our data set. index refers to the index of that element.

You might also notice we wrote :key="index". Every v-for loop item requires a key. For this example, we are using the index as our key. If you leave this out - you will get an error in Vue.

How To Use V-if and V-for Together in Vue

In Vue, we can't use v-for and v-if together, as they often conflict. In our data above, we have a field called completed, which is true if the journey is over, and false if it hasn't happened yet. If we wanted to only show completed journeys, we need to add our v-if to a child HTML element. If we add it to the element with v-for, it won't work!

As such, we could hide any element where completed is false by adding changing our template to look like this:

<template>
    <div id="locations">
        <div class="location-item" v-for="(item, index) in locations" :key="index">
            <p v-if="item.completed === true">We travelled to {{ item.name }} on {{ item.date }} with {{ item.numberOfPeople }} people.</p>
        </div>
    </div>
</template>

Nested V-for Loops in Vue

It's worth also mentioning that nested v-for loops are possible, and follow the same pattern as we've covered in this article. Here is an example of a set of nested v-for loops, where we loop through a list of countries, and their states:

<template>
    <div id="countries">
        <div class="country-item" v-for="(item, index) in countries" :key="index">
            <h2>{{ item.name }} States:</h2>
            <p v-for="(state, i) in item.states" :key="i">state.name</p>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            countries: [
                { 
                    name: "UK", 
                    states: [{
                        name: "London",
                        lowerCaseName: "london"
                    },
                    {
                        name: "Scotland",
                        lowerCaseName: "scotland"
                    }]
                    // More...
                },
                {
                    name: "India",
                    states: [{
                        name: "Madhya Pradesh",
                        lowerCaseName: "madhya-pradesh"
                    }]
                    // More...
                }
            ]
        }
    }
}
</script>

Example of a nested v-for loop in Vue.JS

Conclusion

That's all for v-for loops. We've looked at:

1. How to use v-for loops on data().
2. How to use nested v-for loops.
3. Combining v-for and v-if.

Vue is super fun to use once you start.