twitter-bootstrap - 如何在 bootstrap vue 中创建五个相等的列？

Question

我从这里得到参考：https ://bootstrap-vue.js.org/docs/components/layout#columns-b-col

所以我想在 1 行中制作 5 列

我的脚本是这样的：

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

结果是 1 行中存在 10 列

我想做这样的标签：

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

如果标签是这样的，它将在 1 行中显示 5 列

我的问题是如何在循环中实现它？

标签： twitter-bootstrapvue.jsvuejs2bootstrap-4vue-component

Answer 1

创建一个计算属性：

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

然后

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