Close and Reopen a parent div in a vue js for loop

<div>
  <b-card-group :columns="layout == 'masonry'" :deck="layout == 'grid'">
    <b-card
        v-for="(image, imageIndex) in images"
        :key="imageIndex"
        :img-src="image"
        img-top>
    </b-card>
  </b-card-group>
</div>

I’m using VueJS to render this component. I have an array of image URLs in images data, I’m looping it over in a component (Bootstrap Card), what I want is, I want to close the parent <b-card-group/> for every third iteration of the loop and reopen it again so that I can have a group of 3 <b-card/> inside 1 <b-card-group/>

So for 9 images, I will end up with 3 <b-card-group/> and 3 <b-card/> in each block.

How do I achieve this in Vue JS?

77 thoughts on “Close and Reopen a parent div in a vue js for loop”