Q:

Bootstrap-vue modal open three times

I'm using bootstrap-vue package. In some component I have three card-flip components:
<b-row>
    <b-col lg="4">
        <card-flip :order="'fifth'"></card-flip>
    </b-col>
    <b-col lg="4">
        <card-flip :order="'sixth'"></card-flip>
    </b-col>
    <b-col lg="4">
        <card-flip :order="'seventh'"></card-flip>
    </b-col>
</b-row>

and inside this card-flip component I'm displaying three different buttons depending on :order prop:
<template>
    <!-- some not related content -->
    <template v-if="order === 'fifth'">
        <button class="card-flip__button card-flip__button--2"
                v-b-modal.modalStandard="">
            Sprawdź ofertę1
        </button>
    </template>
    <template v-if="order === 'sixth'">
        <button class="card-flip__button card-flip__button--2"
                v-b-modal.modalPremium="">
            Sprawdź ofertę2
        </button>
    </template>
    <template v-if="order === 'seventh'">
        <button class="card-flip__button card-flip__button--2"
                v-b-modal.modalPremiumPlus="">
            Sprawdź ofertę3
        </button>
    </template>
    <modal-standard></modal-standard>
    <modal-premium></modal-premium>
    <modal-premium-plus></modal-premium-plus>
</template>

I'm using this template syntax to not create unnecessary divs.
And issue is that when I click some of this button it open correct modal but three times on top of previous ones.
I'm adding correct id's to <b-modal> inside those modal-* components.

A:

This is done because each modal is rendered three times, one for each card-flip. You should also add v-if="order === 'fifth'" etc also for each modal in your card-flip template.

