Conditional rendering of b-modal inside a b-table slot template.

[berzerkv]

Hi. I am new to VueJS. I encountered a problem while trying to populate a b-table and open modals on click of button in a row. After I added pagination, some of the pop-ups work some do not.

I have a fiddle here which explains better what I am trying to do.

jsfiddle

To replicate the issue : Go to different pages and try to open all the modals of that page. Some won't open. Am I missing something trivial or is it supposed to behave this way?

Observation: I see that I am able to open only one modal per page after I change to a different page from the initial page.

Update:
After changing buttons from

<b-btn v-b-modal.modal1 size="sm" @click="details(item.item)">Details</b-btn>
<b-btn v-b-modal.modal2 size="sm" @click="details(item.item)">Details</b-btn>
<b-btn v-b-modal.modal3 size="sm" @click="details(item.item)">Details</b-btn>

to

<b-btn v-b-modal="'modal1'" size="sm" @click="details(item.item)">Details</b-btn>
<b-btn v-b-modal="'modal2'" size="sm" @click="details(item.item)">Details</b-btn>
<b-btn v-b-modal="'modal3'" size="sm" @click="details(item.item)">Details</b-btn>

It seems to be working fine to the point that modals are opening for each link. But it opens wrong modal. I have replicate this in new fiddle newjsfiddle

[nardnob]

Here's a working example: https://jsfiddle.net/nardnob/ukaxg561/

Vue reuses elements and that is interfering with the v-b-modal directive. To tell Vue not to reuse an element at all, you can add a key to it.

https://vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key