How to display a data in loop with condition in vue.js/nuxt.js?

Question

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.

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

Does this answer your question? vue.js - How to split array of objects into multiple div columns — Phil
– Phil, Commented Jun 2, 2020 at 5:01

Juanlu Romero · Accepted Answer · 2020-06-02 07:50:30Z

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.

answered Jun 2, 2020 at 7:50

Juanlu Romero

825 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display a data in loop with condition in vue.js/nuxt.js?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related