1. vue-loop-helper

vue-loop-helper

VueLoop

A loop helper plugin inspired by Blade.

Installation

1. Install

yarn add vue-loop-helper
# or
npm i vue-loop-helper --save

2. Plug-in

 import VueLoop from 'vue-loop-helper'

Vue.use(VueLoop)

3. Use in your components

<template>
  <div v-for='item in items'>
    {{ $loop.index }}
    {{ $loop.count }}
    {{ $loop.first }}
    {{ $loop.last }}
    {{ item }}
  </div>
</template>

<script>
  export default {
    data () {
      return {
        items: [
          'foo',
          'bar',
          'baz'
        ]
      }
    }
  };
</script>

Helpers

Property Description
$loop.index The index of the current loop iteration (starts at 0).
$loop.iteration The current loop iteration (starts at 1).
$loop.remaining The iterations remaining in the loop.
$loop.count The total number of items in the array being iterated.
$loop.first Whether this is the first iteration through the loop.
$loop.last Whether this is the last iteration through the loop.
$loop.even Whether this is an even iteration through the loop.
$loop.odd Whether this is an odd iteration through the loop.
$loop.depth The nesting level of the current loop.
$loop.parent When in a nested loop, the parent's loop variable.

Credits

The implementation of this module is inspired by Laravel (Blade)

License

MIT