title: vuejs v-for add bootstrap row every 5 items
body: <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>