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