title: looping in Vue.JS to iterate over some a group of items and wrapping them in an element
body: <p>I am new in Vue, I want to create a Loop (v-for) for creating something like  this block</p>
  
  <pre><code>&lt;div class="The-row"&gt;
   &lt;span&gt; {{ * }} &lt;/span&gt;
   &lt;span&gt; {{ * }} &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>in this block each 2 span wrap with a Tag with " The-row " class and each SPAN tag has an instead item , that means :</p>
  
  <pre><code>&lt;div class="The-row"&gt;
   &lt;span&gt; {{ item[0] }} &lt;/span&gt;
   &lt;span&gt; {{ item[1] }} &lt;/span&gt;
  &lt;/div&gt;
  ----------------------------------
  &lt;div class="The-row"&gt;
   &lt;span&gt; {{ item[2] }} &lt;/span&gt;
   &lt;span&gt; {{ item[3] }} &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>what am i doing for create loop , i know this way for show an element in every twice loop with use</p>
  
  <pre><code>&lt;div v-if=" index % 2 == 0 " &gt;
  </code></pre>
  
  <p>see this pen -> <a href="https://codepen.io/hamidrezanikoonia/pen/RQrvKJ" rel="nofollow noreferrer">https://codepen.io/hamidrezanikoonia/pen/RQrvKJ</a></p>
  
  <p>in this pen , i have 2 important proble
    1. the first item dosent show
    2. the items cant be even</p>
  
  <p>and , please check im in correct way or i can use another way</p>
  
  <p>thanks </p>