Bootstrap-vue модальный открыт три раза - PullRequest
Новая
       32

Bootstrap-vue модальный открыт три раза

0 голосов
/ 05 сентября 2018

Я использую пакет bootstrap-vue. В некоторых компонентах у меня есть три компонента card-flip : 

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

и внутри этого компонента карты я отображаю три разные кнопки в зависимости от :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>

Я использую этот синтаксис template, чтобы не создавать ненужные div.

И проблема в том, что когда я нажимаю на эту кнопку, она открывает правильный модал, но три раза поверх предыдущих.

Я добавляю правильные идентификаторы к <b-modal> внутри этих modal-* компонентов.

1 Ответ

0 голосов
/ 05 сентября 2018

Это сделано потому, что каждый модал отображается три раза, по одному на каждый бросок карты. Вы также должны добавить v-if="order === 'fifth'" и т. Д. Также для каждого модального элемента в шаблоне переворачивания карты.

...