所以我有我的啤酒组件和啤酒detaillist组件在de第二个，我使用了一个卡与引导显示图像，标题等，我的问题是，我想在多行和多列显示卡。 我试过几种方法，但都失败了，所以有人能告诉我怎么做吗？
啤酒
<template>
<div>
<div v-bind:key="beer.id" v-for="beer in beers">
<BeerDetailsList v-bind:beer="beer" />
</div>
</div>
</template>
<script>
import BeerDetailsList from "./BeerDetailsList";
export default {
components: { BeerDetailsList },
name: "Beers",
props: ["beers"],
};
</script>
<style scoped></style>
啤酒明细一览表
<template>
<div class="container">
<b-card-group deck>
<b-card
:title="beer.name"
:img-src="beer.image_url"
:alt="beer.name"
img-top
tag="article"
style="max-width: 20rem ;"
class="mb-2"
>
<b-card-text>
{{ beer.tagline }}
</b-card-text>
<b-button href="#" variant="primary">View Beer details</b-button>
</b-card>
</b-card-group>
</div>
</template>
<script>
export default {
name: "BeerDetailsList",
props: ["beer"],
};
</script>
<style scoped></style>
您必须将for循环放在b-card-group组件上，以便首先指定最多有4张卡的行。 然后您必须在B-Card组件上再放一个for循环，为每个卡组打印4张卡。
您不需要任何第二个组件。 例如代码:
<template>
<div class="container">
<b-card-group deck v-for="i in Math.ceil(beers.length/4)" :key="i">
<b-card
v-bind:key="beer.id"
v-for="beer in beers.slice((i-1)*4, (i-1)*4 + 4)"
:title="beer.name"
:img-src="beer.image_url"
:alt="beer.name"
img-top
style="max-width: 20rem ;"
class="mb-2"
>
<b-card-text>
{{ beer.tagline }}
</b-card-text>
<b-button href="#" variant="primary">View Beer details</b-button>
</b-card>
</b-card-group>
</div>
</template>
<script>
export default {
name: "Beers",
props: ["beers"],
};
</script>
<style scoped></style>
