Accessing index of a v-for loop in a sibling? (VueJS)

Question

I'm trying to produce the following (rendering div elements, broken up by a clearfix after every four elements):

<div class="col-md-3 form-group"></div>
<div class="col-md-3 form-group"></div>
<div class="col-md-3 form-group"></div>
<div class="col-md-3 form-group"></div>
<div class="clearfix></div>
....

And wondering if anything as the code below is possible in VueJS or can someone help me out with an alternative?.

<div v-for="(sku, n) in sku_pattern" :key="n"  class="col-md-3 form-group"></div>
<div v-if="!((n+1)%4)" class="clearfix"> <!-- I know this won't work outside the scope of the previous element. -->

Answer 1

You can use <template> tag with v-for to render a block of multiple elements:

<template v-for="(sku, n) in sku_pattern">
    <div class="col-md-3 form-group">
    </div>
    <div v-if="!((n+1)%4)" class="clearfix">
</template>

Reference document