我正在尝试在v-for循环内使用BootstrapVue-模态,唯一的问题是模态按钮上的模态指令(v-b-modal.modal1)。 modal1应该是模式ID的名称,由于我正在使用循环,所以我在模式中传递了索引,例如modal + index,但是我不知道如何将按钮指令更改为vb-modal-modal1 ... vb-模态模态5。
这是模态成分
<template>
<div>
//This v-b-modal.modal1 should be same as modalId
<b-btn v-b-modal.modal1>Banka: {{ data.offer.client_name }}</b-btn>
<!-- Modal Component -->
<b-modal :id="modalId" title="Oferta">
<p clas="my-4">Kampanja: {{ data.offer.campaign_name }}</p>
<p clas="my-4">Norma e interesit: {{ data.offer.interest_rate_nominal }}</p>
<p clas="my-4">*Shpenzimet Administrative: {{ data.offer.admin_fee }}</p>
<p clas="my-4">Kësti Mujor: {{ data.offer.monthly_payment }}</p>
</b-modal>
</div>
</template>
<script>
export default {
props: ['data'],
computed:{
modalId(){
return 'modal' + this.data.i;
}
}
}
</script>
这是使用模态的方法
<tbody>
<tr v-for="(offer, i) in offers">
<td>
<app-show-details :data="{offer, i}"></app-show-details>
</td>
</tr>
</tbody>
最佳答案
BootStrapVue provides more than one pattern to achieve modal,因此您不必坚持使用指令修饰符,我认为使用指令值完全适合您的要求。检查下面的示例代码。
new Vue({
el: '#app',
methods: {
modalId(i) {
return 'modal' + i;
}
}
});
// or check jsfiddle here: https://jsfiddle.net/5sv805ho/
<script src="https://unpkg.com/vue@2.5.2/dist/vue.min.js"></script>
<link href="https://unpkg.com/bootstrap@next/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
<div v-for="i in 3">
<b-btn v-b-modal="modalId(i)">Launch demo modal</b-btn>
<b-modal :id="'modal' + i" title="Bootstrap-Vue">
<p clas="my-4">Hello from modal {{ i }}!</p>
</b-modal>
</div>
</div>
顺便说一句,you can also use show() and hide() component methods。