by Sai gowtham

Vue - List rendering using V-for directive

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.

list-rendering-vuejs

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>

object-looping-vuejs

Note: In Objects we need to extract value first then key it’s doesn’t work if you interchange it.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
130,921 students enrolled
48.5 hours of video content
View Course