Vue.js - How to increment the index by value 2 in vue v-for loop?

Question

The example code is below: In this code, <ul> executes the loop 7 times, But I need it to print arr[0], arr[1] in the <li> tag respectively. But, in the next time, I want the index value increment by 2, so that it prints arr[2], arr[3] and again increment the index value by 2, index becomes 4 and it prints arr[4] and arr[5] and so on. Thank you in advance for the solution.

<ul class="columns" v-for="index in 7" :key="index">
    <li>
        arr[index]
    </li>
    <li>
        arr[index+1]
    </li>
</ul>

D.Kurapin · Accepted Answer · 2021-01-22 11:09:32Z

3

What do you think about this solution (maybe not so elegant, but it will give what you expect to get, I hope):

<template v-for="index in arr" :key="index">
    <ul v-if="index % 2 === 0" class="columns">
        <li>
            {{ arr[index] }}
        </li>
        <li v-if="!!arr[index+1]">
            {{ arr[index+1] }}
        </li>
    </ul>
</template>

edited Jan 22, 2021 at 11:09

answered Jan 22, 2021 at 10:48

D.Kurapin

10311 bronze badges

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

Comments

Boussadjra Brahim · Accepted Answer · 2020-11-14 13:37:13Z

2

There's no step definition in v-for loop, but you could do the following logic to to achieve what you want :

 <ul class="columns" v-for="index in [...Array(7)].map((_,i)=>i).filter(i=>i%2===0)" :key="index">
        <li>
            {{index}}
        </li>
        <li>
            {{index+1}}
        </li>
    </ul>

but it's very recommended to define a computed property that returns [...Array(7)].map((_,i)=>i).filter(i=>i%2===0) like :

computed:{
  evenNumbers(){
    return [...Array(7)].map((_,i)=>i).filter(i=>i%2===0)
  }

}

<ul class="columns" v-for="index in evenNumbers" :key="index">
        <li>
            {{index}}
        </li>
        <li>
            {{index+1}}
        </li>
    </ul>

[...Array(7)] will give an array of undefined items :

 [undefined,undefined,....]

we use map method which as first parameter the current value which is in this case an undefined value represented by _ (just choosing a short name) and the second parameter which is the current index which we want to return it instead of _ then filter the returned indexes which are multiple of 2 i%2===0

edited Nov 14, 2020 at 13:37

answered Nov 14, 2020 at 11:14

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

4 Comments

SUSINDHAR Over a year ago

return [...Array(7)].map((,i)=>i).filter(i=>i%2===0) , Here ....Array(7) is an array variable and map((,i) here _ represents what ?

Boussadjra Brahim Over a year ago

please check my edited answer, i added some explanation

SUSINDHAR Over a year ago

I worked with your suggestions. It displayed correctly. But, additionally, It prints the 8th index (which is empty) also. since, the total count is 7 only. when it gets into the loop it prints 7th index and index+1 i.e., 8th element also. How to solve it ?

Boussadjra Brahim Over a year ago

the second li should be <li v-if="index+1<=7">{{index+1}}</li>

Coder1991 · Accepted Answer · 2020-11-14 11:22:14Z

0

try this out

<li>
        arr[index==0?index:(index+index)]
    </li>
    <li>
        arr[index==0?index+1:(index+index+1)]
</li>

answered Nov 14, 2020 at 11:22

Coder1991

7351 gold badge5 silver badges9 bronze badges

2 Comments

SUSINDHAR Over a year ago

But, it doesnot print the 1st 2 array values

Coder1991 Over a year ago

@SUSINDHAR In your question, the index is starting from one instead of zero it seems

Collectives™ on Stack Overflow

Vue.js - How to increment the index by value 2 in vue v-for loop?

3 Answers 3

Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related