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

Question

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

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

---

我创建了一个行布局，并将该行分为两个弹性框，因此我具有两列的行结构。我循环使用“ v-for”，并为每一行显示当前索引和下一个索引的值。但是，下一次迭代循环时，将重复最后一个条目。我可以到达的最接近的位置如下所示：

---

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

我也尝试使用表格代替布局和弹性，但无法做到。在codepen中，我使用功能“ checkLength”来获取下一个索引，因为使用预增量运算符来递增“ index”会产生错误（可能是由于数组超出范围）。

---

我在以下查询中苦苦挣扎：

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

2）是否有像我们在Javascript中那样以“ 2”为增量迭代“ v-for”的方法？ 例如：

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

Answer 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