How to populate bootstrap grid dynamically using Vue.js

Question

So far I have fetched a list of objects from my database (each contain a name and description) and would like to display these objects in a bootstrap grid so that each object has its own section with its name and description shown. So if for example there are 5 items in the list and I'd like 3 items per row, then it would look like this:

And the grid would be responsive to the screen size. I'm not very familiar with Vue and can't see how to do this without hardcoding the grid.

This is what my code currently looks like:

<template>
  <div class="app">
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'app2',
  data() {
    return {
      items: []
    }
  },
// Fetch items from database...
}

you can use boostrap-vue is too easy

Fabrice Fabiyi
– Fabrice Fabiyi

2020-05-28 19:00:11 +00:00
Commented May 28, 2020 at 19:00 — Fabrice Fabiyi
– Fabrice Fabiyi, Commented May 28, 2020 at 19:00

Hans Felix Ramos · Accepted Answer · 2020-05-28 18:51:58Z

1

Use v-for and bootstrap styles:

<template>
  <div class="app">

    <div class="row">
      <div class="col-sm" v-for="item in items">
        {{ item.prop1 }}
      </div>
    </div>

  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'app2',
  data() {
    return {
      items: []
    }
  },
// Fetch items from database...
}

answered May 28, 2020 at 18:51

Hans Felix Ramos

4,4543 gold badges19 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

How to populate bootstrap grid dynamically using Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related