BootstrapVue b-table toggleDetails opens multiple row details - vue.js

Question

I have an issue with Bootstrap Vue table showDetails for row.
When I open website for the first time and I click show details button it shows details with loading state, fetch the data and then when completed shows the details.
However when I hide the expanded row and click show Details for another row, after the fetch both of them are expended. Meaning I can see details of 2 rows.
(If I open and hide X of rows, after I expand one more, all previously opened and hiden X details will be visible)
Thank you for help!
Toggle details Method:
toggleDetails(item) {
if (item._showDetails) {
this.$set(item, '_showDetails', false)
} else if (this.listType === MEETING_LIST_TYPE.history) {
this.$set(item, '_showDetails', true)
} else {
item._showDetails = true
item.busy = true
this.showMeetingDetails({
meeting: item,
listType: this.listType
}).then(() => {
item.busy = false
})
}
}
Fetch method (action):
showMeetingDetails({ commit }, { meeting, listType }) {
return fetchMeetingDetails(meeting).then(res => {
commit('SET_MEETING_DETAILS', { meeting: res, listType })
})
}
Mutation:
SET_MEETING_DETAILS(state, { listType, meeting }) {
switch (listType) {
case MEETING_LIST_TYPE.today:
state.todayMeetings = state.todayMeetings.map(m =>
m.meetingID === meeting.meetingId
? { ...m, ...meeting, _showDetails: true }
: m
)
break
case MEETING_LIST_TYPE.all:
state.allMeetings = state.allMeetings.map(m =>
m.meetingID === meeting.meetingId
? { ...m, ...meeting, _showDetails: true }
: m
)
break
default:
break
}
}

Answer 1

Hello I figure out the solution. :D
So the problem was with vue reactivity when I was trying to change the value for the item which was inside the list and trying to jump over vuex a bit.
Helpful link here:
https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
To solve this problem I added mutations in my vuex for _showDetails and also busy state to show spinner when I am loading details row data. I also found out that in row item from bootstrap table, there are a lot of useful properties like index.
That all helped me to write cleaner mutations with usage of Vue.set()
Bellow my code. Probably I could still fix the methods naming ^^. If you have any ideas how to make it even simpler or cleaner I will appreciate!
Vue template (inside b-table):
<b-button id="detailsBtn" class="mr-2">
<b-icon
#click="toggleDetails(row)"
v-if="!row.detailsShowing"
icon="plus"
></b-icon>
<b-icon v-else icon="dash" #click="toggleDetails(row)"></b-icon>
</b-button>
my toggleDetails() function:
toggleDetails(row) {
if (row.item._showDetails) {
this.hideShowDetails(row, false)
} else {
this.showDetails(row)
}
},
showDetails(row) {
if (this.listType === MEETING_LIST_TYPE.history) {
this.hideShowDetails(row, true)
} else {
this.TOGGLE_BUSY_MEETING({
listType: this.listType,
index: row.index,
isBusy: true
})
this.hideShowDetails(row, true)
this.fetchMeetingDetails({
meeting: row.item,
listType: this.listType,
index: row.index
})
}
},
hideShowDetails(row, showDetails) {
this.TOGGLE_MEETING_DETAILS({
listType: this.listType,
index: row.index,
showDetails: showDetails
})
}
My action:
fetchMeetingDetails({ commit }, { meeting, listType, index }) {
return fetchMeetingDetails(meeting).then(res => {
commit('SET_MEETING_DETAILS', { meeting: res, listType, index })
})
}
My mutations:
SET_MEETING_DETAILS(state, { listType, meeting, index }) {
Vue.set(state.meetings[listType], index, {
...state.meetings[listType][index],
...meeting,
_showDetails: true,
busy: false
})
},
TOGGLE_MEETING_DETAILS(state, { listType, index, showDetails }) {
Vue.set(state.meetings[listType], index, {
...state.meetings[listType][index],
_showDetails: showDetails
})
},
TOGGLE_BUSY_MEETING(state, { listType, index, isBusy }) {
Vue.set(state.meetings[listType], index, {
...state.meetings[listType][index],
busy: isBusy
})
}
I hope someone might find it helpful! Cheers!