-1

I have attached an image that i want to display a checkbox in a column using vue.js/nuxt.js .I want to display all the checkbox data using for loop and with 3 items to dispaly in a column.

enter image description here

<div class="row">

    <div class="col-xxs-6 col-sm col-lg col-xl">

        <ul>

            <li>checkbox</li>
            <li>checkbox</li>
            <li>checkbox</li>

        </ul>

    </div>
    <div class="col-xxs-6 col-sm col-lg col-xl">

        <ul>

            <li>checkbox</li>
            <li>checkbox</li>
            <li>checkbox</li>

        </ul>

    </div>

</div>
Phil
  • 157,677
  • 23
  • 242
  • 245
Sameer Bashyal
  • 1
  • 3
  • Does this answer your question? [vue.js - How to split array of objects into multiple div columns](https://stackoverflow.com/questions/50038129/vue-js-how-to-split-array-of-objects-into-multiple-div-columns) – Phil Jun 02 '20 at 05:01

1 Answers1

1

You can iterate over your checkbox-array and then display those checkboxes over a CSS grid.

.grid-box {
  display: grid;
  grid-template-colums: repeat(5, 1fr);
  grid-gap: 10px;
}
<div class="grid-box">
  <Checkbox v-for="(checkbox, index) in checkboxList" :key="index" />
</div>

You can read more about CSS-Grid here.

Juanlu Romero
  • 82
  • 5