0

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?

moses toh
  • 12,344
  • 71
  • 243
  • 443

1 Answers1

2

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>
Vanojx1
  • 5,574
  • 2
  • 23
  • 37
  • It seems your code is not perfect. For example I have 2 items. If I use your code, In 1 row there are only 2 columns. It should remain 5 columns. 2 columns have items , 3 other columns are empty – moses toh Oct 01 '18 at 02:47
  • I make a new question. Look at this : https://stackoverflow.com/questions/52584241/how-can-i-set-column-in-row-on-the-card-group-bootstrap-vue. Maybe you can help me again – moses toh Oct 01 '18 at 07:58