bootstrap-vue modal打开三遍

Posted 2023-02-22

【中文标题】bootstrap-vue modal打开三遍

【英文标题】：Bootstrap-vue modal open three times

【发布时间】：2019-02-09 22:34:56

【问题描述】：

我正在使用 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 属性显示三个不同的按钮：

<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-* 组件中添加了正确的 ID。

【参考方案1】：

这样做是因为每个模式被渲染了 3 次，每次翻牌一次。您还应该为卡片翻转模板中的每个模式添加 v-if="order === 'fifth'" 等。