CODEWITHSUNDEEP
javascriptvue.jstemplatesbootstrap-modalbootstrap-vue
antca230
antca230

Reputation: 56

Use multiple modals in template vue.js

I'm trying to create one modal for each row but when i open one modal all the other modals open as well. i suppose this have something to do with the id but i don't know how to fix it. Using [email protected]

<template #cell(add)="row">
  <div>
    <b-button
      v-b-modal="'row'"
      class="bg-dark text-white"
      test-id="showOrHideAddButton"
      size="sm"
    >
      add
    </b-button>
    <b-modal id=row>
      Hello From My Modal!
    </b-modal>
  </div>
</template>

Upvotes: 0

Views: 958

Answers (1)

B0BBY
B0BBY

Reputation: 1109

As user3113901 wrote in the comments above ID's should be always unique. Only class could/should be used multiple times.

Here you can see an example how it should work:

<template>
  <div>
    <b-button
      v-b-modal="'row1'" <!-- use unique ID here --->
      class="bg-dark text-white"
      test-id="showOrHideAddButton"
      size="sm"
    > add </b-button>
    <b-modal id="row1"> <!-- Here you have to put your id-name into "" --->
      Hello From My First Modal!
    </b-modal>


    <b-button
      v-b-modal="'row2'" <!-- use unique ID here --->
      class="bg-dark text-white"
      test-id="showOrHideAddButton"
      size="sm"
    > add </b-button>
    <b-modal id="row2"> <!-- Here you have to put your id-name into "" --->
      Hello From My Second Modal!
    </b-modal>
  </div>
</template>

If you set v-b-modal equal to your id in your <b-modal> and make it all unique it should work out!

Upvotes: 1

Related Questions