<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
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?