CODEWITHSUNDEEP
vue.jsvuejs2bootstrap-modalbootstrap-vue
BT101
BT101

Reputation: 3826

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.

Upvotes: 3

Views: 2479

Answers (1)

iiirxs
iiirxs

Reputation: 4582

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.

Upvotes: 2

Related Questions