Using v-for in Vue – example

In this guide you will learn how to use v-for in Vue & loop through a given data in vue, using the index of the item as the key.

Let’s assume we have the following array in our instance:

<script>
export default {
  data() {
    return {
      clubs: ["Manchester City", "Liverpool", "Chelsea", "Liverpool"],
    };
  },
};
</script>

We can use the v-for directive to loop through the data and display as a list

<template>
  <div>
    <!-- Clubs in England -->
    <ul>
      <li v-for="(club, index) in clubs" :key="index">
        {{ club }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clubs: ["Manchester City", "Liverpool", "Chelsea", "Liverpool"],
    };
  },
};
</script>

As seen we use the index of each element which is unique to them as the key for the loop.