CODEWITHSUNDEEP
twitter-bootstrapvue.jsvuejs2bootstrap-4vue-component
moses toh
moses toh

Reputation: 13192

How can I make five equal columns in the bootstrap vue?

I get reference from here : https://bootstrap-vue.js.org/docs/components/layout#columns-b-col

So I want to make 5 column in 1 row

My script like this :

<template>
    ...
        <b-row>
            <b-col cols v-for="club in clubs">
                {{club.name}}
            </b-col>
        </b-row>
    ...
</template>
<script>
    export default {
        data () {
            return{
                clubs: [
                    {id:1, name:'chelsea'},
                    {id:2, name:'liverpool'},
                    {id:3, name:'mu'},
                    {id:4, name:'city'},
                    {id:5, name:'arsenal'},
                    {id:6, name:'tottenham'},
                    {id:7, name:'juventus'},
                    {id:8, name:'madrid'},
                    {id:9, name:'barcelona'},
                    {id:10, name:'psg'}
                ]
            }
        },
        ...
    }
</script>

The result is there exist 10 column in 1 row

I want make the tag like this :

<b-row>
    <b-col cols>
        chelsea
    </b-col>
    <b-col cols>
        liverpool
    </b-col>
    <b-col cols>
        mu
    </b-col>
    <b-col cols>
        city
    </b-col>
    <b-col cols>
        arsenal
    </b-col>
</b-row>
<b-row>
    <b-col cols>
        tottenham
    </b-col>
    <b-col cols>
        juventus
    </b-col>
    <b-col cols>
        madrid
    </b-col>
    <b-col cols>
        barcelona
    </b-col>
    <b-col cols>
        psg
    </b-col>
</b-row>

If the tag like that, it will display 5 column in 1 row

My problem is how can I implement it in the loop?

Upvotes: 0

Views: 1358

Answers (1)

Vanojx1
Vanojx1

Reputation: 5584

Make a computed property:

{
   ...
   computed: {
      formattedClubs() {
          return this.clubs.reduce((c, n, i) => {
            if (i % 5 === 0) c.push([]);
            c[c.length - 1].push(n);
            return c;
          }, []);
      }
   }
}

then

<b-row v-for="row in formattedClubs">
  <b-col cols v-for="club in row">
    {{club.name}}
  </b-col>
</b-row>

Upvotes: 2

Related Questions