Bootstrap-vue 모달 3회 오픈

Bootstrap-vue 모달 3회 오픈

bootstrap-vue 패키지를 사용하고 있습니다.일부 컴포넌트에는 3개의 카드 플립 컴포넌트가 있습니다.

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

그리고 이 카드 플립 컴포넌트 안에는 3개의 다른 버튼이 표시됩니다.:order소품:

<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를 생성하지 않도록 구문을 지정합니다.

그리고 문제는 이 버튼 중 몇 개를 클릭하면 이전 버튼 위에 올바른 모달(modal)이 3번 열린다는 것입니다.

에 올바른 ID를 추가합니다.<b-modal>그 안에modal-*구성 요소들.

이것은 각 모달은 카드 플립마다 1개씩 3회 렌더링되기 때문입니다.또한 다음 항목을 추가해야 합니다.v-if="order === 'fifth'"각 모달에 대해서도, 카드 교환 템플릿의 각 모달에 대해 etc를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/52173978/bootstrap-vue-modal-open-three-times