I am completely new to VueJS and I'm currently working on populating a table with various columns, one of which contains a button that triggers the opening of a modal. There are three different types of modals that can be opened based on certain conditions. Below is my attempt to solve this issue:
For reference, I have included a link to my jsfiddle after the code snippet.
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'
}
},
// more object entries here...
}],
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:
After introducing pagination, I encountered the same bug described below in my application. To replicate the issue, navigate to a different page and try opening all the available modals. Some may not open. Visit my fiddle: fiddle
Observation:
I noticed that I am only able to open one modal per page when switching pages from the initial view.
Bug Description:
When clicking on the button for the rows, particularly those sharing the same modal type, I encounter a strange behavior where some do not trigger the corresponding popup. For instance, if we consider the entries P and Q in the column both linked to modal 1, clicking on P opens the modal while clicking on Q does not. Although the exact cause of this bug seems elusive, any guidance or pointers in resolving it would be greatly appreciated. Thank you.