Loop Variables

[dabernathy89]

Laravel's Blade template system has a feature called the "loop variable". This is a variable available inside a foreach loop that provides quick access to commonly needed information about the current item in the loop, such as whether it is the first or last item, whether it's an even or an odd "row", etc. It would be really neat if we could write a loop like this:

<li v-for="(item, index, {length, last, iteration}) in items">
  Item #{{ iteration }} - {{ item.message }}
  
  <template v-if="last">
    You've seen all {{ length }} items
  </template>
</li>

This is more concise than the current alternative:

<li v-for="(item, index) in items">
  Item #{{ index + 1 }} - {{ item.message }}
  
  <template v-if="index === items.length - 1">
    You've seen all {{ items.length }} items
  </template>
</li>

[Jinjiang]

I think it could be easily achieved by some util functions which could save runtime cost and bundle size for Vue general usage.

[dabernathy89]

One problem with this is there's no way to initialize a variable inside a v-for. You could wrap 'items' and insert a loop variable into each item, but that feels messy. The only other way I could think to do it would be a custom directive. If there is an easier solution I would be happy to use that!

[Jinjiang]

You don't have to initialize variables in the for loop if I've got your point. e.g.:

<script setup>
const isLast = index => index === items.length - 1
</script>
...
<li v-for="(item, index) in items">
  Item #{{ index + 1 }} - {{ item.message }}
  
  <template v-if="isLast(index)">
    You've seen all {{ items.length }} items
  </template>
</li>

or if you like:

<script setup>
const isLast = (index, items) => index === items.length - 1
</script>
...
<li v-for="(item, index) in items">
  Item #{{ index + 1 }} - {{ item.message }}
  
  <template v-if="isLast(index, items)">
    You've seen all {{ items.length }} items
  </template>
</li>

Anyway, you can define a function in script and call it (with necessary arguments) instead if you feel any expressions in the template looks complex.