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

2022-01-25 00:00:00 vue.js vue-component vuejs2 vuetify.js

我正在使用

选中所有用户"时，应选中所有复选框.

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

解决方案

你应该把 v-layout 放在 v-for

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

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

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

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)

解决方案

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

相关文章