Vue.js 引导vue模式打开三次
我使用的是bootstrap vue软件包。在某些组件中,我有三个卡片翻转组件:Vue.js 引导vue模式打开三次,vue.js,vuejs2,bootstrap-modal,bootstrap-vue,Vue.js,Vuejs2,Bootstrap Modal,Bootstrap Vue,我使用的是bootstrap vue软件包。在某些组件中,我有三个卡片翻转组件: <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-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>
我使用这个模板语法来不创建不必要的div
问题是,当我点击这个按钮时,它会打开正确的模式,但会在前面的按钮上打开三次
我在那些模态组件中添加了正确的id。之所以这样做,是因为每个模态渲染三次,每个卡片翻转一次。您还应该为卡翻转模板中的每个模式添加v-if=order==“fifth”等
<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>