I'm showcasing divs in a loop and I need to assign classes based on the loop index. My goal is to have index 0 and 1 with the class col-6, then indexes 2,3,4 with the class col-4, followed by index 5 and 6 having the class col-6, and so forth.
This would result in my divs looking like:
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 repeating this pattern.
I've tried using modulo but haven't had any success. Currently, my code looks like this:
<div v-for="(n, index) in imagesArr" :class="index === 0 || index === 1 ? 'col-6' : 'col-4'" style="padding: .5rem">
<img :src="n" :alt="'Image of yacht number ' + index" class="img-fluid">
</div>
While I could continue checking each index as shown above, it's not ideal due to the length of the loop. I'm searching for a more efficient solution.