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.

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2021 (Beginner + Advanced)
JavaScript - The Complete Guide 2021 (Beginner + Advanced)
64,026 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)
152,857 students enrolled
48.5 hours of video content
View Course