Mar 9, 2023 Author - Sai gowtham

Vue - List rendering using V-for directive

vuejs2min read

In this tutorial, we are going to learn about how to loop through the arrays and render a list of items in vue.

V-for Directive

Vue.js offers us a v-for directive which is used to render a list of items into the dom.

The syntax of a v-for directive.

v-for="user in users"
<!-- user variable is iterator -->
<!--users is data array-->

Example

<template>
 <ul>
   <!-- list rendering starts -->
  <li v-for="user in users">{{user.name}}</li> </ul>
</template>

<script>
 export default{
     data:function(){
         return{
             users:[
                 {id:1,name:"king"},
                 {id:2,name:"gowtham"},
                 {id:3,name:"ooops"},
             ]
         }
     }
 }
</script>

In the above code, we are looping through the users array by using v-for directive, so that on each iteration user variable is pointing to the different object present inside the array.

key attribute

When using v-for directive we need to add a key attribute to that element because vuejs needs to keep track the list items based on the provided key.

Note: Key should be unique

Let’s add the key attribute to our template.

<template>
 <ul>
  <li v-for="user in users" :key="user.id">    {{user.name}}
  </li>
 </ul>
</template>

<script>
 export default{
     data:function(){
         return{
             users:[
                 {id:1,name:"king"},
                 {id:2,name:"gowtham"},
                 {id:3,name:"ooops"},
             ]
         }
     }
 }
</script>

In our users array id property is unique on every object so that we passed it to the key attribute.

We can also access the index of each item present in the array.

<template>
<ul>
  <li v-for="(user,index) in users" :key="user.id">    {{user.name}} {{index}}
  </li>
 </ul>
</template>

Looping through Objects

We can also loop through JavaScript objects by using v-for directive.

<template>
  <ul>
    <!-- accessing `value and key` present in person object -->
    <li v-for="(value, key) in person" :key="key">      {{key}} : {{ value }}
    </li>
  </ul>
</template>

<script>
export default {
  data: function() {
    return {
      person: {
        firstName: "Rim",
        lastName: "Doe",
        age: 20,
        eyeColor: "blue"
      }
    };
  }
};
</script>