创建每 10 个项目添加的动态 div 元素

Question

我的情况如下：

有未知数量的复选框需要添加到布局组件中，动态排列在一列中，每个布局项有 10 个复选框。

我设法将它们全部添加到单个 div 元素中，但我不知道如何动态添加 div。

这是我现在拥有的：

      <md-card v-if="loaded">
        <md-card-header>
          <div class="md-title">SETTINGS FOR COLUMNS</div>
        </md-card-header>
        <md-divider></md-divider>
        <md-card-content>

          <div>
            <b-form-checkbox
              v-for="option in options"
              v-bind:key="option.id"
              @input="changeOptions"
              :id="option.text"
              v-model="option.value"
              name="checkbox-1"
            >
              {{ option.displayName }}
            </b-form-checkbox>
          </div>

        </md-card-content>
      </md-card>

结果：

我想要完成的是将项目按列排列，每列有 10 个复选框。

这是期望的结果：

Answer 1

尝试使用计算属性对选项进行分页，例如：

computed:{
  paginatedOptions(){
        var matrix = [], i, k;

    for (i = 0, k = -1; i < this.options.length; i++) {
        if (i % 10 === 0) {
            k++;
            matrix[k] = [];
        }

        matrix[k].push(list[i]);
    }
  return matrix;         
 }

}

然后在模板中渲染分页数组：

<div v-for="pOptions in paginatedOptions" style="display:flex">
  <div>
       <b-form-checkbox
              v-for="option in pOptions"
              v-bind:key="option.id"
              @input="changeOptions"
              :id="option.text"
              v-model="option.value"
              name="checkbox-1"
            >
              {{ option.displayName }}
            </b-form-checkbox>
  </div>           
</div>

上面的算法灵感来自this answer

Answer 2

只需为此使用 css 网格：

<div class="checkboxes-grid">
...checkboxes here  
</div>

.checkboxes-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(10, 1fr);
}

您可以在grid-template-rows 规则中管理每列需要多少项。