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

Posted 2023-03-06

【中文标题】创建每 10 个项目添加的动态 div 元素

【英文标题】：Create dynamic div element adding per 10 items

【发布时间】：2021-07-08 06:27:57

【问题描述】：

我的情况如下：

有未知数量的复选框需要添加到布局组件中，动态排列在一列中，每个布局项有 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 个复选框。

这是期望的结果：

【参考方案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

【讨论】：

非常感谢！这就是我需要的。我只需要添加适当的 materialvue 类来调整布局 div 中的项目 :)

【参考方案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 规则中管理每列需要多少项。

【讨论】：

感谢您的建议，但首先是 Boussadjra Brahim 的回答。由于需要在将对象附加到复选框本身之前对其进行操作，因此他的答案更加具体。但这仍然是一个非常干净的解决方案，所以竖起大拇指！