javascript - 在 v-for 中迭代 vue 引导模式

Question

我在 v-for 中有一个 vue bootstrap modal，我想用索引替换 'v-b-modal.modal-1' 和 'modal-1' 中的 1，我可以在循环中将其打印为 {{ index }} 但我不知道如何将其添加到每个标识符的末尾。

<div v-for="(movie, index, i) in movies">
  <b-button v-b-modal.modal-1>Launch demo modal</b-button>
  <b-modal id="modal-1" title="BootstrapVue">
    <p class="my-4">Hello from modal!</p>
  </b-modal>
</div>

Answer 1

对于是否可以动态应用修饰符的问题引用，否你不能这样做，它应该是静态的。

但是由于您的问题与 Bootstrap 模式相关，我在研究解决方案时阅读了此用法。

我相信您可以通过将修饰符作为值传递来实现此目的，其行为如 id ，并且由于该值是 JS 表达式，因此您可以动态操作它。

<b-button v-b-modal="'modal-1'">Launch demo modal</b-button>

<div v-for="(movie, index, i) in movies">
  <b-button v-b-modal="'modal-1'">Launch demo modal</b-button>
  <b-modal id="modal-1" title="BootstrapVue">
    <p class="my-4">Hello from modal!</p>
  </b-modal>
</div>