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开发工具检查模态，这是屏幕截图：https://imgur.com/u9fIqOL

在这里您可以看到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"