I am working on a structural component that involves looping through a list and performing certain actions based on the items:
....
<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)" - where INDEX is manipulated to ensure unique values for each iteration
></Component>
</template>
</template>
<template v-else>
....
</template>
</template>
....
The value of INDEX can be repeated multiple times, such as (22, 22, 22), followed by another set like (25, 25), and so on. I have attempted to compare the previous index with the current one in order to pass a new incremented value to the child component.
For instance:
If INDEX is repeatedly equal to 22, then change it to 0 and return this value. The next set of INDEX being equal to 55 should be changed to 1 and returned. This pattern continues...
How can I achieve this logic within Vue? Are there alternative solutions available?
Thank you.