How to write and use for loop in Vue js?

Vue JS is an open-source JavaScript framework. It is used to create single-page apps and user interfaces. The component-based architecture of Vue Js uses separated, reusable elements called components to encapsulate HTML, JavaScript, and CSS. This enables the usage of a virtual DOM to boost performance while also helping efficient and maintainable code. Vue Js’s reactivity system, which allows it to immediately refresh the user interface when the underlying data changes, is one of its distinguishing characteristics.

The “v-for” directive in Vue Js renders elements from iterating over arrays or objects based on the item looped over. Depending on the kind of data being iterated, there are several alternative ways to write and use v-for. There are many ways to use for loop in Vue js. Three of them we will discuss briefly

• Going through an Array Iteratively − Users may go through an array iteratively by using the syntax v-for=” item in items,” where “item” stands for the item that is presently being repeated over in the loop and “items” stands for the name of the array that is being iterated over. The “key” directive offers a separate key for each item in the loop to aid Vue in optimizing the render process.

• Iterating over an Object − To iterate across an object, use the syntax v-for=” (value, key) in object,” where “value” refers to the object’s current value and “key” to the object’s existing key. The “key” directive is used like looping through an array.

• Using an index to loop across an array − A loop across an array with an index can be created using the syntax v-for=” (item, index) in items”, where “item” denotes the current item in the loop and “index” denotes the current index. The “key” directive is used like looping through an array.

Theoretically, these are the three main ways to create and use v-for in Vue.js. The precise syntax and usage may change depending on the kind of data being iterated over. The core concept, however—rendering items based on the item currently in the loop— remains unchanged.

Steps to Create a Vue JS Project

• Install Vue Js by the following command in the terminal.

npm install vue 

• Install the Vue CLI

npm install --global vue-cli 

• To create a Vue project, run the below command

vue init webpack myapp 

• Navigate to the myapp folder that is created

cd myapp 

• Run the Vue Js application

npm run dev 

Looping through an Array

Example

In this example, we will write and use for loop in Vue Js. We will be looping through an Array object consisting of different names. The “data” method defines a list of names, and each item on the names list consists of a unique id and a name. We use the v-for directive and loop the names array using the “name in names” syntax. The key for each element is taken as the id value of each named item.

App.vue

This is the main file where we write our code for this example. In the project structure of Vue Js, it is available inside the src folder.

<template>
   <div>
      <h2> <i> Looping through an Array </i> in <i> Vue Js </i> </h2>
      <h4> The list is below: </h4>
      <ul>
         <li v-for="name in names" :key="name.id">
            Id: {{ name.id }} => Name: {{ name.name }}
         </li>
      </ul>
   </div>
</template>
<script>
   export default {
      data () {
         return {
            names: [
               { id: 1, name: 'ABC CBA' },
               { id: 2, name: 'XYZ ZYX' },
               { id: 3, name: 'MNO ONM' },
               { id: 4, name: 'PQR RQP' },
               { id: 5, name: 'AAA AAA' },
               { id: 6, name: 'EFG GFE' }
            ]
         }
      },
      name: 'App'
   }
</script> 

Output

Looping through an Object

Example

In this example, we will be looping through an Object consisting of different key-value pairs. The “data” method defines an object named ‘myObject’, and the Object consists of keys and values. We use the v-for directive and loop the object using the “(value, key) in myObject” syntax.

App.vue

This is the main file where we write our code for this example. In the project structure of Vue Js, it is available inside the src folder.

<template>
   <div> 
      <h2><i>Looping through an Object</i> in <i>Vue Js</i></h2>
      <h4>The list is below:</h4>
      <ul>
         <li v-for="(value, key) in myObject" :key="key">
            {{ key }}: {{ value }}
         </li>
      </ul>
   </div>
</template>
<script>
   export default {
      data () {
         return {
            myObject: {
               key1: 'value1',
               key2: 'value2',
               key3: 'value3',
               key4: 'value4',
               key5: 'value5'
            }
         }
      },
      name: 'App'
   }
</script>

Output

Looping through an Array with Index

Example

In this example, we will be looping through an Array object without indexing. The “data” method defines a list. A list item is generated for each item in the “items” array using the v-for directive to loop through the array. The “key” directive provides a specific key for each item, which helps Vue optimise the render process. The “index” variable is used to specify the current index of the item in the loop.

App.vue

This is the main file where we write our code for this example. In the project structure of Vue Js, it is available inside the src folder.

<template>
   <div>
      <h2><i>Looping through an Array with Index</i> in <i>Vue Js</i></h2>
      <h4>The list is below:</h4>
      <ul>
         <li v-for="(item, index) in items" :key="index">
            {{ index }}: {{ item }}
         </li>
      </ul>
   </div>
</template>
<script>
   export default {
      data () {
         return {
            items: ['item 1', 'item 2', 'item 3'],
         }
      },
      name: 'App'
   }
</script>

Output

The “v-for” directive is employed in each instance to loop through the provided array or object and render elements based on the item in the loop. Depending on the type of data being iterated over, the syntax and usage may change, but the fundamental principle does not.