时间戳

首页 > 解决方案 > b-modal 上的串联 id 不起作用（vue 和 bootstrap-vue）

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

问题描述

我有以下代码：

<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 时，为什么它们不起作用？我错过了什么？

标签： javascriptvue.jsbootstrap-modalbootstrap-vue

解决方案

解决方案：

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

推荐阅读