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.

Prerequisites:

• 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'

createApp(App).mount('#app')

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

<template>
  <div class="container">
    <table class="table">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Department</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>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
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",
        },
      ],
    };
  },
};
</script>

Code in Action: