v-for

Vue 3 for loop component similar to laravel blade's foreach directive.

---

Install

npm install --save v-for

Setup

import { createApp } from "vue";
import App from "./App.vue";

import vFor from "v-for";

const app = createApp(App);
app.use(vFor);
app.mount("#app");

Usage

The for component accepts a of prop which can be passed an Array, and exposes item and $loop data via the default scoped slot. The $loop variable here is similar to the $loop variable present in blade's foreach directive.

<template>
    <for v-slot="{ item, $loop }" :of="[1, 2, 3]">
        <div :key="item">
            {{ $loop.index }} .
            {{ item }}
            <br />
        </div>
    </for>
</template>

$loop

The $loop variable exposes the following properties:

Name	Type	Desctiption
index	Number	The current index for the loop (starts from 0)
iteration	Number	Iteration count for the loop (starts from 1)
remaining	Number	Count of remaining elements in the Array to loop over
count	Number	Total elements in the Array
first	Boolean	true if it is the first iteration of the loop, false otherwise
last	Boolean	true if it is the last iteration of the loop, false otherwise
even	Boolean	true for even iterations of the loop, false otherwise
odd	Boolean	true for odd iterations of the loop, false otherwise
depth	Number	The depth of the loop; starts at 1 and increases by 1 for nested loop instances

Break and Continue

There is limited support for break and continue statements within the loop via break and continue components.

<template>
    <for v-slot="{ item, $loop }" :of="[1, 2, 3]">
        <div :key="item">
            {{ $loop.index }} .

            <continue v-if="item === 1" />

            {{ item }}

            <break v-if="item === 2" />

            <br />
        </div>
    </for>
</template>

The support is limited in the sense that theses components cannot be used inside the slot of another custom component in the loop.

<template>
    <for v-slot="{ item, $loop }" :of="[1, 2, 3]">
        <div :key="item">
            {{ $loop.index }} .
            <custom-component>
                {{ item }}
                <br />

                <!--  "continue" is present inside  "custom-component"  -->
                <!-- this will not work -->
                <continue v-if="item === 1" />
            </custom-component>
        </div>
    </for>
</template>

Nested loops

Loops can be nested as well. The $loop variable for nested loops can be aliased so as to have access to parent loop's $loop variable as well.

<template>
    <for v-slot="{ item, $loop }" :of="[1, 2, 3]">
        <div :key="item">
            {{ $loop.depth }} .
            {{ item }}
            <br />
            <for v-slot="{ item: item2, $loop: $loop2 }" :of="[4, 5, 6]">
                <div :key="item2">
                    {{ $loop2.depth }} . {{ $loop.depth }} .
                    {{ item2 }}
                    <br />
                </div>
            </for>
        </div>
    </for>
</template>