Vue. How can I get prev and current value in loop v-for for comparing it?

Question

I have a part of the structure:

....
<template v-for="(item, INDEX) in someList">
    <template v-if="thisIsArrayList(item)">
        <template v-for="(_item) in item">
            <Component
                :item="_item"
                :key="_item.id"
                :myprop="checkIndex(INDEX)" - makes here some manipulation with prev and current INDEX and return iterration++ 0, 1
            ></Component>
        </template>
    </template>
    <template v-else>
        ....
    </template>
</template>
....

The INDEX can be couple times with the same value like (22, 22, 22) the next step like (25, 25) and so on .. so I tried in props:arrayId to compare prevINDEX with the currentIndex for passing it in child like new value with iterations++

for example:

INDEX couple times equal 22 --> change it on 0 and return this value --> the next INDEX couple time equal 55 --> change it on 1 and return this value --> and so on ...

How can I do it in Vue? Or maybe there is another solution for this logic?

Thanks.

Your question is a little unclear; would the index v-for parameter help? Eg. v-for="(item, index) in items" will give the template in your loop access to the index value, which you could use to access the previous and/ or next value in items. — zcoop98
– zcoop98, Commented Jul 9, 2021 at 14:55
I edited the example .. so you can see what INDEX I'm meaning — Kikambus
– Kikambus, Commented Jul 9, 2021 at 15:12

Amaarockz · Accepted Answer · 2021-07-09 15:05:08Z

1

You don't need to use an explicit variable infact v-for itself provides you the ability to extract index during iteration

<template v-for="(item, index) in items">
    <Component
        :item="item"
        :key="item.id"
    ></Component>
</template>

As per the above code, the arrayId prop is not necessary, since you are no longer going to compare the indexes [since you won't have redundant values]

answered Jul 9, 2021 at 15:05

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

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

6 Comments

Kikambus Over a year ago

I edited the example .. so you can see what INDEX I'm meaning

Amaarockz Over a year ago

if someList is an array, they you won't have redundant values in INDEX

Kikambus Over a year ago

that depends on how many elements in the array you have. Child component takes props:INDEX 3 times with the same INDEX if array.length == 2

Amaarockz Over a year ago

you don't get it

Amaarockz Over a year ago

if that's an array then index won't be redundant, maybe the id attr inside each object could be redundant

|

Collectives™ on Stack Overflow

Vue. How can I get prev and current value in loop v-for for comparing it?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related