Showing different pop-ups on click of a table element - vue.js

Question

I am very new to VueJS. I am trying to populate a table. One of the columns is a button on clicking which a modal opens. There can be 3 different types of modals. I tried solving the problem like this :
I have linked my jsfiddle after this reference code.
HTML
<div id="app">
<!-- Main table element -->
<b-table striped hover :items="items" :fields="fields" >
<template slot="name" slot-scope="item">
{{item.value.first}} {{item.value.last}}
</template>
<template slot="isActive" slot-scope="item">
{{item.value?'Yes :)':'No :('}}
</template>
<template slot="actions" slot-scope="item">
<div v-if="item.item.age < 15">
<b-btn v-b-modal.modal1 size="sm" #click="details(item.item)">Details</b-btn>
</div>
<div v-else-if="item.item.age > 26">
<b-btn v-b-modal.modal2 size="sm" #click="details(item.item)">Details</b-btn>
</div>
<div v-else>
<b-btn v-b-modal.modal3 size="sm" #click="details(item.item)">Details</b-btn>
</div>
</template>
</b-table>
<b-modal id="modal1">
modal 1
</b-modal>
<b-modal id="modal2">
modal 2
</b-modal>
<b-modal id="modal3">
modal3
</b-modal>
</div>
VueJS
new Vue({
el: '#app',
data: {
items: [{
isActive: true,
age: 40,
name: {
first: 'Dickerson',
last: 'Macdonald'
}
}, {
isActive: false,
age: 21,
name: {
first: 'Larsen',
last: 'Shaw'
}
}, {
isActive: false,
age: 9,
state: 'success',
name: {
first: 'Mitzi',
last: 'Navarro'
}
}, {
isActive: false,
age: 89,
name: {
first: 'Geneva',
last: 'Wilson'
}
}, {
isActive: true,
age: 38,
name: {
first: 'Jami',
last: 'Carney'
}
}, {
isActive: false,
age: 27,
name: {
first: 'Essie',
last: 'Dunlap'
}
}, {
isActive: true,
age: 40,
name: {
first: 'Dickerson',
last: 'Macdonald'
}
}, {
isActive: false,
age: 21,
name: {
first: 'Larsen',
last: 'Shaw'
}
}, {
isActive: false,
age: 26,
name: {
first: 'Mitzi',
last: 'Navarro'
}
}, {
isActive: false,
age: 22,
name: {
first: 'Geneva',
last: 'Wilson'
}
}, {
isActive: true,
age: 38,
name: {
first: 'Jami',
last: 'Carney'
}
}, {
isActive: false,
age: 27,
name: {
first: 'Essie',
last: 'Dunlap'
}
}],
fields: {
name: {
label: 'Person Full name',
sortable: true
},
age: {
label: 'Person age',
sortable: true
},
isActive: {
label: 'is Active'
},
actions: {
label: 'Actions'
}
}
},
methods: {
details(item) {
//gets some data. Write 3 different functions to fetch data accordingly
}
}
})
Style:
#app {
padding: 20px;
height: 500px;
}
Update:
I was able to replicate the bug described below here after I added pagination.
my fiddle: fiddle
To replicate, go to a different page and try opening all of the modals. Some will not open.
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.
Is there any better way of doing this? Or am I missing something trivial?
Bug descriptoin:
I am running into a strange behavior in my code where most of the rows(seems random to me) don't open a pop-up when the button is clicked.This happens even for the same modal type
Eg : Suppose P,Q entries of the column are of type modal1. Clicking on P opens a modal and clicking on Q does not.
I know this bug seems vague but I will be very glad if some one could point me in the right direction. Thanks.

Answer 1

Can't explain why this happens (maybe is a bug of bootstrap-vue). Anyway, if you replace:
<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>
with:
<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 work fine.
Hope this helps you.