如何在 v-for 循环中使用 BootstrapVue - 模态？答案

【问题标题】：How to use BootstrapVue - Modal inside v-for loop?如何在 v-for 循环中使用 BootstrapVue - 模态？
【发布时间】：2018-04-07 14:04:17
【问题描述】：

我正在尝试在 v-for 循环中使用 BootstrapVue - 模态，唯一的问题是模态按钮上的模态指令 ( v-b-modal.modal1 )。 modal1 应该是 modal id 的名称，因为我使用的是循环，所以我在模态中传递索引，例如 modal + index，但我不知道如何将按钮指令更改为 vb-modal-modal1 ... vb- modal-modal5.

这是模态组件

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

这是一个使用modal的方法

<tbody>
  <tr v-for="(offer, i) in offers">
    <td>
      <app-show-details :data="{offer, i}"></app-show-details>
    </td>
  </tr>
</tbody>

【问题讨论】：

标签： javascript twitter-bootstrap vue.js vuejs2 vue-directives

【解决方案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。

【讨论】：