Wie verwende ich BootstrapVue - Modal innerhalb der v-for-Schleife?

Question

Ich versuche BootstrapVue - Modal in V-for-Schleife zu verwenden und das einzige Problem ist mit modalen Direktive (v-b-modal.modal1) auf einer modalen Schaltfläche. modal1 sollte der Name der Modal-ID sein und da ich eine Schleife verwende, überlasse ich den Index in modal, zum Beispiel modal + index, aber ich weiß nicht, wie man die buttons-Anweisung in vb-modal-modal1 ändert ... vb- modal-modal5.

Dies ist modal Komponente

<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> 

Hier ist eine Methode, die

<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 modal verwendet, so dass Sie sich auf Richtlinie Modifikatoren nicht darauf bestehen, ich glaube Richtlinie Wert mit passt Ihre Voraussetzung hier perfekt. Überprüfen Sie den folgenden Beispielcode.

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>

By the way, you can also use show() and hide() component methods.