Display multiple checkbox in table format using and in Vuetify?

问题

I'm using the VuetifyJs for VueJS and I'm trying to display checkbox in table format from an array of objects. Desired Output shown below :

When 'All Users' is checked all the checkboxes should be checked.

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:

CodePen Url: https://codepen.io/dhnsh/pen/ZRMgoE

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).

I am struggling with the below queries :

1) How can we display the desired output in Vuetify ?

2) Is there anyway to iterate 'v-for' with increment of "2" like we can do in Javascript ? ex:

    for(var i=0;i<array.length();i += 2)

回答1:

You should put v-layout outside of v-for

  <div class="mr-4 ml-4 whiteback userGroupHeight">
          <v-layout row wrap>
                <v-flex v-for="(category,index) in types" :key="types[index].text" xs6>
                  <v-checkbox light :label="category.text" v-model="category.selected">
                  </v-checkbox>
                </v-flex>
          </v-layout>
</div>

then you don't need to use checkLength method.

Demo: https://codepen.io/ittus/pen/ZRqYME

来源：https://stackoverflow.com/questions/51052395/display-multiple-checkbox-in-table-format-using-v-for-and-v-checkbox-in-vuet

标签

Vue.js