Generate a new div element dynamicaly after every 10 elements are added

Question

Generate a new div element dynamicaly after every 10 elements are added

I am facing the following scenario:

I need to dynamically add an UNKNOWN number of checkboxes to a layout component, arranged in columns with 10 checkboxes per layout item.

Although I have successfully added all the checkboxes to a single div element, I am struggling to add the divs dynamically.

This is my current setup:

      <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 this is the current output:

https://i.sstatic.net/HFKjb.png

My goal is to have the items neatly organized in columns with 10 checkboxes in each column.

This is the desired outcome: https://i.sstatic.net/XgCXp.png

css vue.js bootstrap-4 vuejs2

Answer 1

Answer №1

To achieve this layout, simply utilize css grid:

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

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

You can adjust the number of items per column by modifying the grid-template-rows property.

Answer 2

To achieve this layout, simply utilize css grid:

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

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

You can adjust the number of items per column by modifying the grid-template-rows property.

Answer 3

Answer №2

Implementing pagination for options can be achieved using a computed property like this:

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 display the paginated array in your template like so:

<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 pagination algorithm was inspired by this answer

Answer 4

Implementing pagination for options can be achieved using a computed property like this:

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 display the paginated array in your template like so:

<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 pagination algorithm was inspired by this answer

Generate a new div element dynamicaly after every 10 elements are added

Answer №1

Answer №2

Similar questions

Tips for integrating Vuex store with router for seamless accessibility

Using VueJs to associate boolean values with dropdowns

The grandchild of sibling A sends out a signal, prompting the parent to make necessary adjustments in the value, however sibling B

Clicking on an element deactivates its hover state

Can global Vue 3 plugins be utilized within Storybook narratives?

An easy way to place text along the border of an input field in a React JS application using CSS

Unable to select selectbox in the bottom section of Safari browser

Tips for adjusting the alignment of numbers in an ordered list to the right

The table is not displaying the CSS class as intended

How can I deactivate a specific range without altering the appearance with Bootstrap 5?

Arranging containers in a fixed position relative to their original placement

Change the input field font style in AngularJS

Vuex 3: The State Remains Unknown

Searching for all classes and IDs in a CSS Stylesheet that include a specific keyword

Utilize a single WebAssembly instance within two separate Web Workers

What steps should I take to fix my responsive media query?

The system encountered an error stating that the required component "Footer" in the main directory was not located in the specified node_modules

Optimizing performance by serving Vue JS chunks lazily from a CDN

As the height is expanded, the background color gradually infiltrates the body of the page

Populate List Items until Maximum Capacity is Reached and Increase the