javascript - b-modal 上的串联 id 不起作用(vue 和 bootstrap-vue)

Question

我有以下代码:

<template v-for="(element, index) in tableData">
  <tr>
      <template v-for="field in element">

        <template v-if="typeof field==='object'">
          <td v-for="nestedObjectValue in field">
            {{nestedObjectValue}}
          </td>
        </template>

        <template v-else>
          <td>
            {{field}}
          </td>
        </template>

      </template>
      <td><button v-on:click="changeRecord">Aendern</button></td>
      <td>
        <b-button v-b-modal.modal-1>Launch demo modal </b-button>

        <b-modal :id="'modal_' + index" title="BootstrapVue">
          <p class="my-4">Hello from modal dynam!</p>
        </b-modal>
      </td>
  </tr>
</template>

我的<b-modal></b-modal>应接收由“modal_”和“index”连接而成的 ID。索引取自此 v-for 循环 <template v-for="field in element"> 。这在一定程度上是有效的。我可以使用 vue 开发工具检查模态，这是一个屏幕截图: /image/zKYpi.jpg

在这里您可以看到 id 属性已相应设置。但是，当我单击按钮时，没有出现模式。

模态功能有效。例如，如果我给模态一个静态 ID，如下所示:

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

他们工作。如果它们都具有相同的 id，则只需按一个按钮即可触发 ^^但它们有效。当我以这种方式为它们分配唯一 ID 时，为什么它们不起作用？我错过了什么？

Answer 1

解决方案:

重命名::id="'modal_' + index" 为 :id="'modal-' + index"