BootstrapVue - Modal inside v-for loop를 사용하는 방법?

Question

나는 BootstrapVue-Modal을 v-for 루프 안에 넣으려고하는데 유일한 문제는 모달 버튼의 모달 지시문 (v-b-modal.modal1)이다. modal1은 모달 id의 이름이어야하고 모달에서 인덱스를 전달하는 루프를 사용하고 있으므로 modal + index와 같은 버튼 지시문을 변경하는 방법을 모르지만 ... 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> 

Answer 1

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.