Create dynamic div element adding per 10 items

Question

I am in the following situation:

There are UNKNOWN number of checkboxes that needs to be added to a layout component dynamically arranged in a column 10 checkboxes per layout item.

I managed to add them all to a single div element but I cannot figure out how to add the divs dynamically.

Here is what I have now:

      <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>

And the result:

What I want to accomplish is to have the items arranged in columns with 10 checkboxes per column.

Here is the desired result:

score 4 · Answer 1 · answered Apr 13 '21 at 08:25

4

Just use css grid for this:

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

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

You can manage how many items you need per column in grid-template-rows rule.

answered Apr 13 '21 at 08:25

Roman Chasovitin

78
4

Thanks for the suggestion but Boussadjra Brahim was first with his answer. Because of the fact that will need to manipulate the objects before attaching them to the checkbox itself his answer is more specific. But still that is really clean solution so thumbs up! – JohnRambo Apr 13 '21 at 08:34

score 1 · Accepted Answer · answered Apr 13 '21 at 08:10

Try out to paginate the options using a computed property like :

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;         
 }

}

then render the paginated array in template :

<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>

the algorithm above is inspired by this answer

Thanks a lot! That is what i needed. I just needed to add the proper classes of the materialvue in order to adjust the items in a layout div :) — JohnRambo, Apr 13 '21 at 08:33

Create dynamic div element adding per 10 items

2 Answers2