Bootstrap Vue基于v-for中的布尔值来区分col大小

Question

嗨，我从我的api中提取了5个cols，其中一个布尔值表示fullsize＝true。如果我想成为col-12，我是vue.js的新手，无法完全理解，但引导程序已经使用很长时间了

我的布局需要

col-6 col-6
col-12
col-6 col-6

但我得到的是
col-6
col-6
col-12
coll-6
col-6

有人能指引我走正确的路吗

<b-container class="h-100" v-for="block in item.block" :key="block.id">
<b-row class="h-100 justify-content-center align-items-center text-center">
<b-col v-if="block.fullWidth" class="col-12">
<section class="sf-banner hero" v-bind:style="{ backgroundImage: 'url(' + block.backgroundImage.url + ')' }">
<h1 class="sf-banner__title">{{block.title}}</h1>
</section>
</b-col>
</b-row>
<b-row class="h-100 justify-content-center align-items-center text-center">
<b-col class="col-6" v-if="!block.fullWidth">
<section class="sf-banner block" v-bind:style="{ backgroundImage: 'url(' + block.backgroundImage.url + ')' }">
<h1 class="sf-banner__title">{{block.title}}</h1>
</section>
</b-col>
</b-row>
</b-container>

Answer 1

v-for应该在列上，而不是在容器上，然后使用

:class="{'col-12': block.fullWidth, 'col-6': !block.fullWidth}"

或

:class="[block.fullWidth ? 'col-12' : 'col-6']"

RTM：https://v2.vuejs.org/v2/guide/class-and-style.html

<b-container class="h-100">
<b-row class="h-100 justify-content-center align-items-center text-center">
<b-col v-for="block in item.block" :key="block.id" :class="{'col-12': block.fullWidth, 'col-6': !block.fullWidth}">
<section class="sf-banner hero" :style="{ backgroundImage: 'url(' + block.backgroundImage.url + ')' }">
<h1 class="sf-banner__title">{{block.title}}</h1>
</section>
</b-col>
</b-row>
</b-container>