Modulo in v-for loop

Question

I'm displaying divs in loop and I want to bind class depending on index of loop. So what I want to achive is that index 0 and 1 have class col-6 then 2,3,4 have index col-4 and then 5 and 6 have class col-6 and so on.

So in the end my divs would look like this:

div.col-6 div.col-6
div.col-4 div.col-4 div.col-4
div.col-6 div.col-6
div.col-4 div.col-4 div.col-4
div.col-6 div.col-6

and so on..

I can't find pattern to do that I tried with modulo but with not luck. At the moment my code is:

<div v-for="(n, index) in imagesArr" :class="index === 0 || index === 1 ? 'col-6' : 'col-4'" style="padding: .5rem">
    <img :src="n" :alt="'Zdjęcie jachtu nr ' + index" class="img-fluid">
</div>

Of course I could check like above for every index but it will look awful as this loop is long so I'm looking for another way.

Answer 1

I would suggest creating computed Property

computed: {    
    classNameByIndex: function (index) {
      return index % 5 == (0 || 1) ? 'col-6' : 'col-4';
    }
  }

This will for 0, 1 return 'col-6' and for 2, 3, 4 return 'col-4' and as it uses moduo it will do same for 5, 6 return 'col-6' and for 7, 8, 9 return 'col-4' and so on