我正在使用引导程序vue
编写调查。当我尝试显示轮播时,Chrome浏览器告诉我高度为0,但是当我更改高度时,它只是显示具有轮播属性的灰色正方形,而没有显示我的卡片。
谢谢您的帮助!
<template class="bg-light">
<b-col offset-lg="4" lg="4" sm="12">
<b-form>
<b-carousel
id="carousel-1"
v-model="slide"
:interval="0"
controls
indicators
background="#ababab"
>
<b-carousel-slide v-for="q in questions" v-bind:key="q.questionid">
<b-card class="border-info" >
<b-card-header class="bg-warning">{{q.question}}</b-card-header>
<b-card-body>
<b-check-group >
<b-checkbox :id="q.rep1.id" :value="q.rep1.id">{{q.rep1.text}}</b-checkbox>
<b-checkbox :id="q.rep2.id" :value="q.rep2.id">{{q.rep2.text}}</b-checkbox>
<b-checkbox :id="q.rep3.id" :value="q.rep3.id">{{q.rep3.text}}</b-checkbox>
<b-checkbox :id="q.rep4.id" :value="q.rep4.id">{{q.rep4.text}}</b-checkbox>
</b-check-group>
</b-card-body>
</b-card>
</b-carousel-slide>
</b-carousel>
</b-form>
</b-col>
</template>
答案 0 :(得分:1)
您需要利用b-carousel-slide
中的img slot在幻灯片中添加自定义标记。
<b-col offset-lg="4" lg="4" sm="12">
<b-form>
<b-carousel
id="carousel-1"
v-model="slide"
:interval="0"
controls
indicators
background="#ababab"
>
<b-carousel-slide v-for="q in questions" :key="q.questionid">
<template v-slot:img>
<b-card class="border-info" no-body>
<b-card-header class="bg-warning">{{q.question}}</b-card-header>
<b-card-body>
<b-check-group>
<b-checkbox :id="q.rep1.id" :value="q.rep1.id">{{q.rep1.text}}</b-checkbox>
<b-checkbox :id="q.rep2.id" :value="q.rep2.id">{{q.rep2.text}}</b-checkbox>
<b-checkbox :id="q.rep3.id" :value="q.rep3.id">{{q.rep3.text}}</b-checkbox>
<b-checkbox :id="q.rep4.id" :value="q.rep4.id">{{q.rep4.text}}</b-checkbox>
</b-check-group>
</b-card-body>
</b-card>
</template>
</b-carousel-slide>
</b-carousel>
</b-form>
</b-col>