Выполните итерацию по модальной загрузочной Vue в v-for

Question

У меня есть модальная загрузка Vue в v-for, и я хочу заменить 1 в 'vb-modal.modal-1' и 'modal-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>