在Vuetify中使用<v-for>和<v-checkbox>以表格格式显示多个复选框？答案

【问题标题】：Display multiple checkbox in table format using <v-for> and <v-checkbox> in Vuetify?在Vuetify中使用<v-for>和<v-checkbox>以表格格式显示多个复选框？
【发布时间】：2018-12-05 17:40:22
【问题描述】：

我正在使用 VuetifyJs 对于 VueJS，我正在尝试从对象数组中以表格格式显示复选框。 所需输出如下所示：

选中“所有用户”时，应选中所有复选框。

我创建了一个行布局并将这一行分成两个弹性框，所以我有两列的行结构。我使用'v-for'循环并为每一行显示当前索引和下一个索引的值。但是下一次循环迭代时会重复最后一个条目。我能到达的最近距离如下图：

CodePen 网址： https://codepen.io/dhnsh/pen/ZRMgoE

我也尝试使用 table 而不是 layout 和 flex 但无法做到。在 codepen 中，我使用函数 'checkLength' 来获取下一个索引，因为使用预增量运算符递增 'index' 会产生错误（可能是由于数组超出范围）。

我正在努力解决以下问题：

1) 我们如何在 Vuetify 中显示所需的输出？

2) 有没有像我们在 Javascript 中所做的那样以“2”的增量迭代“v-for”？例如：

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

【问题讨论】：

标签： vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

你应该把v-layout放在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>

那么你就不需要使用checkLength 方法了。

演示：https://codepen.io/ittus/pen/ZRqYME

【讨论】：

非常感谢您的解决方案。