Multiple modale on the same page in a programmatic way

Hello,

I’m trying to have one modale per row on a talbe. I found #1424 but it’s not working in my case.

On each row on my table, I got a component that renders a modale:

<confirmation-modale
    :id="'team_' + row.item.id"
    ...
    :action-route="generateDetachRoute(row.item.id)">
</confirmation-modale>

// inside the confirmation-modale
<button :v-b-modal="id" :class="finalClass">{{ btnLabel }}</button>
    <b-modal
      :id="id"
      ref="confirmationModaleRef"
      :title="trans('confirmation')"
      :ok-title="trans('submit')"
      no-close-on-backdrop
      hide-header-close
      :visible="showModal"
    >
   ...

It’s either I don’t have this code, and all the modale opens when I click on one button, and with this code shared, no modale opens. What am I missing please ?

Also, I close this modale programatically, so do I need to customize the ref prop to make it unique so It only close 1 modale or not? this.$refs.<variable>.hide() ?

[tmorehouse]

That issues is probably due to the z-inzex values, and the fact that your modal is inside the table cells.

[tmorehouse]

And I just notices that you are also using the visible prop when also using the v-modal directive.

If all of your modals are tied to the same value of visible, you will run into issues.