Bootstrap-Vue diffrent col size based on boolean in v-for

Question

Hi im fetching 5 cols from my api with a boolean for full-size = true if i want i t to be a col-12, im new to vue.js and cant quite figure it out, but bootstrap have i worked with for a long time

my layout needs to be

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

but what i get is
col-6
col-6
col-12
col-6
col-6

can someone please guide me in the right way

<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

The v-for should be on the columns not on the container, then use

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

or

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