vuejs v-for add bootstrap row every 5 items : <p>I have an array of items like 'Item 1', 'Item 2' up to 'Item 25'. I want the HTML after rendering look like this:</p>

<pre><code>&lt;div class="row"&gt;
   &lt;div&gt;Item 1&lt;/div&gt;
   &lt;div&gt;Item 2&lt;/div&gt;
   &lt;div&gt;Item 3&lt;/div&gt;
   &lt;div&gt;Item 4&lt;/div&gt;
   &lt;div&gt;Item 5&lt;/div&gt;
&lt;/div&gt;
&lt;div class="row"&gt;
   &lt;div&gt;Item 6&lt;/div&gt;
   &lt;div&gt;Item 7&lt;/div&gt;
   &lt;div&gt;Item 8&lt;/div&gt;
   &lt;div&gt;Item 9&lt;/div&gt;
   &lt;div&gt;Item 10&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>What is the proper way to express this in vue.js? </p>

<pre><code> &lt;div class="row"&gt;
    &lt;span  v-for="(item, index) in items"&gt;
         // do something like this in vue.js style: 
         // if (item % 5 == 0) print "&lt;/div&gt;&lt;div class='row'&gt;"
         &lt;app-field &gt;{{ item }}&lt;/app-field&gt;
    &lt;/span&gt;
&lt;/div&gt;
</code></pre>
