vue.js - 使用表格格式显示多个复选框和在 Vuetify 中？

Question

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

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

---

我创建了一个行布局并将这一行分成两个弹性框，所以我有两列的行结构。我使用'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.jsvuejs2vue-componentvuetify.js

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