Display multiple checkbox in table format using <v-for> and <v-checkbox> in Vuetify?

Question

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)

ittus · Accepted Answer · 2018-06-27 01:38:10Z

11

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

answered Jun 27, 2018 at 1:38

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dhanesh Agrawal Over a year ago

Thanks a lot for the solution.

Collectives™ on Stack Overflow

Display multiple checkbox in table format using <v-for> and <v-checkbox> in Vuetify?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related