How To Use For Loop In Vue.js

Introduction

In this article, I will guide you on rendering lists in Vue.js and iterating over an array in vue.js using the v-for directive.

Prerequisites

• Familiarity with HTML and JavaScript 
• Basic knowledge of command line
• node.js installed

Create Vue.js Project

To create a Vue.js app, use the following command in the terminal.

vue create forloopdemo

Now install bootstrap in the project.

npm install bootstrap

Then, open the main.js file with your code editor. Import bootstrap.

import 'bootstrap/dist/css/bootstrap.css'

import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Now right-click on the components folder and add a new component named 'Demofor.vue'. Now open Demofor.vue component and add the following code.

<template>
    <div class="container">
        <div class="row">
            <div class="col-sm-12 btn btn-info">
                How to Use for Loop in Vue.js
            </div>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Department</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in UserList" v-bind:key="item.id">
                    <td> {{ item.Id }}</td>
                    <td> {{ item.name }}</td>
                    <td> {{ item.dept }}</td>
                    <td> {{ item.city }}</td>
                </tr>

            </tbody>
        </table>
    </div>
</template>
  
<script>
export default {
    name: 'Demofor',
    props: {
        msg: String
    },
    data: function () {
        return {
            UserList: [
                {
                    Id: 1,
                    name: 'Mariah Carey',
                    dept: 'IT',
                    City: 50
                },
                {
                    Id: 2,
                    name: 'Brenda Lee',
                    dept: 'Hr',
                    city: 44
                },
                {
                    Id: 3,
                    name: 'Bobby Helms',
                    dept: 'IT',
                    city: 41
                },
                {
                    Id: 4,
                    name: 'Burl Ives',
                    dept: 'HR',
                    city: 25
                },
                {
                    Id: 5,
                    name: 'Adele',
                    dept: 'Admin',
                    city: 11
                }
            ]
        }
    }
}
</script> 

In the above code, I have created a dummy user list data  ''UserList" to show the data in a loop. In UserList data, we add in v-for loop to iterate the data. I have added an HTML table to display the data. On page load data is shown in the table with the help of v-for loop.

Now open the App.vue component. Add the following code in the App.vue component.

<template>
  <div id="app">
    <Demofor/>
  </div>
</template>

<script>
import Demofor from './components/Demofor.vue'

export default {
  name: 'App',
  components: {
    Demofor
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 10px;
}
</style>

In the above code, we have added the reference of  Demofor.vue component inside app.vue file

Now run the application by using the following command.

npm run serve

Summary

In this article, we learned how to use for loop in Vue.js.