title: Display multiple checkbox in table format using <v-for> and <v-checkbox> in Vuetify?
body: <p>I'm using the
  <a href="https://vuetifyjs.com/en/components/selection-controls" rel="nofollow noreferrer">
  VuetifyJs
  </a> 
  for VueJS and I'm trying to display checkbox in table format from an array of objects.
  <strong>Desired Output</strong> shown below :</p>
  
  <p><a href="https://i.stack.imgur.com/veXGZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/veXGZ.png" alt="enter image description here"></a></p>
  
  <p>When 'All Users' is checked all the checkboxes should be checked. </p>
  
  <hr/>
  
  <p>I created a row layout and divided this row into two flex boxes so I have the structure of row with two columns. I loop using 'v-for' and for every row display the value of the current index and the next index. But the last entry is repeated the next time the loop is iterated. The closest I could reach is as shown below:</p>
  
  <p><a href="https://i.stack.imgur.com/gOEZD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gOEZD.png" alt="enter image description here"></a></p>
  
  <hr/>
  
  <p><strong>CodePen Url:</strong> <a href="https://codepen.io/dhnsh/pen/ZRMgoE" rel="nofollow noreferrer">https://codepen.io/dhnsh/pen/ZRMgoE</a></p>
  
  <p>I also tried to use table instead of layout and flex but could not make it. In the codepen I use the function 'checkLength' to get the next index because incrementing the 'index' with pre-increment operator gives error(probably due to array goes out of bounds).</p>
  
  <p><hr/>
  I am struggling with the below queries :</p>
  
  <p>1) How can we display the desired output in Vuetify ?</p>
  
  <p>2) Is there anyway to iterate 'v-for' with increment of "2" like we can do in Javascript ?
  ex: </p>
  
  <pre><code>    for(var i=0;i&lt;array.length();i += 2)
  </code></pre>