CODEWITHSUNDEEP
javascriptvue.jsbootstrap-modalbootstrap-vue
Narktor
Narktor

Reputation: 1037

concatenated id on b-modal doesnt work (vue and bootstrap-vue)

I have the following code:

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

my <b-modal></b-modal> shall receive an ID concatenated from "modal_" and "index". Index is taken from this v-for loop <template v-for="field in element">. This works, to a degree. I can inspect the modals with the vue dev tools, here is a screenshot: https://i.sstatic.net/zKYpi.jpg

Here you can see that the id property was set accordingly. However, when I click the buttons, no modal appears.

The modal functionality works. For example, If I give the modals a static id like this:

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

They work. If they all have the same id, they all trigger when hitting just one button ^^ but they work. Why don't they work when I assigned them unique IDs this way? What am I missing?

Upvotes: 0

Views: 805

Answers (1)

Ilijanovic
Ilijanovic

Reputation: 14904

Solution:

Rename: :id="'modal_' + index" to :id="'modal-' + index"

Upvotes: 3

Related Questions