Horje
How to Write Better Vue v-for Loops?

Vue.js is a popular JavaScript framework used for building dynamic web applications. One of its key features is the v-for directive, which allows developers to render a list of items based on an array or an object. Writing efficient and clean v-for loops is crucial for optimizing performance and maintaining readable code.

You can utilize the below approaches to accomplish this task:

Table of Content

Using Key Attribute

Adding a unique key to each item in the v-for loop improves Vue’s rendering performance and helps in efficiently updating the DOM.

Syntax:

<ul>
    <li v-for="(item, index) in items" :key="index">
        {{ item }}
    </li>
</ul>

Example: The below code implements the key attribute to write better Vue v-for loops.

JavaScript 
<template>
    <div>
        <h2>
            The below list is rendered using the
            <br />v-for loop in a better way.
        </h2>
        <ul>
            <li v-for="(item, index) in items" 
                :key="index">
                {{ item }}
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                items: 
                    ['Apple', 'Banana', 'Orange'],
            };
        },
    };
</script>

Output:

v-forOP

Using Index Variable

Vue.js allows accessing the index of the current item directly within the v-for loop by passing and extra parameter to separately specify the index.

Syntax

<ul>
    <li v-for="(item, index) in items">
        {{ index }} - {{ item }}
    </li>
</ul>

Example: The below code implements index variable to use Vue v-for loop in a better way.

JavaScript 
<template>
    <div>
        <h2>
            The below list is rendered using the
            <br />v-for loop in a better way.
        </h2>
        <ul>
            <li v-for="(item, index) in items">
                {{ index }} - {{ item }}
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                items: 
                    ['Apple', 'Banana', 'Orange']
            };
        }
    }
</script>

Output:

v-forOP

Using v-for with Computed Properties

Sometimes you may need to filter or manipulate the data before rendering it. Computed properties can be used in conjunction with v-for to achieve this.

Syntax:

<ul>
    <li v-for="item in filteredItems">
        {{ item }}
    </li>
</ul>

Example: The below code will explain the use of computed properties with v-for loop to use them in a better way.

JavaScript 
<template>
    <div>
        <h2>
            The below list is rendered using the
            <br />v-for loop in a better way.
        </h2>
        <ul>
            <li v-for="item in filteredItems" 
                :key="item">
                {{ item }}
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                items: 
                    ['Apple', 'Banana', 'Orange']
            };
        },
        computed: {
            filteredItems() {
                return this.items.filter
                    (item => item.length > 5);
            }
        }
    }
</script>

Output:

v-forOP


 


Reffered: https://www.geeksforgeeks.org

JavaScript

Related
How to Change Button Label in Alert Box using JavaScript? How to Change Button Label in Alert Box using JavaScript?
JavaScript Program to Find Area of semi-circle JavaScript Program to Find Area of semi-circle
JavaScript Program to Find Perimeter of Square JavaScript Program to Find Perimeter of Square
JavaScript Program to Find Perimeter of Parallelogram JavaScript Program to Find Perimeter of Parallelogram
How to Convert String to JSON in JavaScript? How to Convert String to JSON in JavaScript?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 14



 

Horje