[Vuejs]-Loop variables in Vue.js similar to AngularJS

by

5👍

✅

It works for me 🙂 

<div v-for="(item, index) in items">
    <span  v-if="index === (items.length-1)">This is the last loop element</span>
</div>
👤Nisha

1👍

you can also put the logic in a computed property :

  <div v-for="(value, key) in myObj">
    <span v-if="key === last">This is the last loop element : {{ value }}</span>
  </div>

  //...
  computed: {
    last() {
      let keys = Object.keys(this.myObj)
      return keys.slice(-1)[0]
    }
  }

fiddle here

👤Sovalina

0👍

There’s no equivalent for this in Vue, no.

👤Linus Borg

0👍

You can do this instead, check for index if it is last 

  <div v-for="(value, key, index) in myObj">
     <div v-if="index === Object.keys(myObj).length-1"> my content</div>
  </div>
👤sridhar..

0👍

You can try this

<div v-repeat="myObj">
 <span v-if="$index === (myObj.length-1)">Shows if it is the last loop element</span>
</div>
👤Komalpreet Singh

0👍

Based on @Nisha answer I have been doing this:

<template v-for="(obj, index) in originalData">
    <template v-if="index == 0 || (index >= 1 && obj.valueA !== originalData[index - 1].valueA)">
        {{ obj.valueA }}
    </template>
</template>

I want the loop to always happen the first time, but to conditionally check a value for every loop afterwards. I am using <template> tags to avoid outputting unnecessary markup. In my example originalData is an array of objects.

👤freeMagee

Leave a comment