我正在使用 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 的语法。
问题是,当我单击此按钮的某些部分时,它会打开正确的模态,但会在之前的模态之上打开 3 次。
我正在向 <b-modal>
添加正确的 ID里面那些 modal-*
组件。
最佳答案
这样做是因为每个模态框都渲染了 3 次,每次翻转卡片一次。您还应该为卡片翻转模板中的每个模式添加 v-if="order === 'fifth'"
等。
关于vue.js - Bootstrap-vue 模态打开三次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52173978/