Vue.js: Save index of v-for?

Question

I would like to save the latest index inside a v-for, but I don't know how to include this logic inside the template?

Basically, I have this:

<div v-for="(reply, index) in replies" :key="reply.id">

I want to include this logic inside the template somehow:

this.last_index = index

I just want to know the amount of total replies in that v-for loop.

Thank you!

replies.length gives the total number of replies.

Vamsi Krishna
– Vamsi Krishna

2017-07-31 10:04:20 +00:00
Commented Jul 31, 2017 at 10:04 — Vamsi Krishna
– Vamsi Krishna, Commented Jul 31, 2017 at 10:04

Bert · Accepted Answer · 2017-07-31 15:12:43Z

1

The most adequate solution is use a computed property in Vue. I usually made it like this:

computed: {
  
  lengthReply() {
  
      return this.replies.length;
      
  }
  
}

If you use Vuex, then you probably can use getters for this case. If you really don't wanna use computed property, then you can put it in your template in curly braces, like this:

{{ replies.length }}

If you need to render only last element in your reply list, then you can use this terrible code:

<div v-for="(reply, index) in replies" v-if="reply === replies[replies.length - 1]">

edited Jul 31, 2017 at 15:12

Bert

82.6k17 gold badges205 silver badges166 bronze badges

answered Jul 31, 2017 at 12:03

Kamil' Ocean

6517 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Erutan409 Over a year ago

Why not just do v-if="index === (replies.length - 1)"?

Collectives™ on Stack Overflow

Vue.js: Save index of v-for?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related