How To Use For Loop In Vue.js

In this article, I’ll guide you on picture lists inVue.js and repeating over an array in vue.js using the v- for directive.


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

Step 1: Create new vue project:

vue create forloop-demo

Step 2: Install require packages:

npm install bootstrap

Step 3: Open main.js file and add the following in it:

import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'


Step 4: Open App.vue file and add the following in it:

  <div class="container">
    <table class="table">
        <tr v-for="item in UserList" v-bind:key="">
          <td>{{ item.Id }}</td>
          <td>{{ }}</td>
          <td>{{ item.dept }}</td>

export default {
  name: "App",
  data() {
    return {
      UserList: [
          Id: 1,
          name: "David",
          dept: "IT",
          Id: 2,
          name: "John",
          dept: "Hr",
          Id: 3,
          name: "Richa",
          dept: "IT",
          Id: 4,
          name: "Mayur",
          dept: "HR",
          Id: 5,
          name: "Denish",
          dept: "Admin",

Code in Action:

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories