我正在尝试在 v-for 循环中使用 BootstrapVue - 模态,唯一的问题是模态按钮上的模态指令( vb-modal.modal1 )。modal1 应该是 modal 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>