In my Vue.js project, I created a bootstrap table to display data loaded from local JSON files. One of the features I added is the ability to Show/Hide details of specific rows, which shows a full message for that row. Now, I'm looking for a way to implement a checkbox or button to expand/collapse all rows at once, but I'm facing some challenges as it doesn't seem to work properly. My experience with Vue is limited, so any help would be appreciated. Here you can see how the app looks right now. You can view the code on CodePen, but please note that you won't be able to load it without the JSON file. And here's an example of the JSON data structure.
If you need more information about this app/project, feel free to ask!
This is the part of my code where I handle showing and hiding details of specific rows:
<b-table
id="myTable"
class="text-center"
:small="small"
:bordered="bordered" hover head-variant="dark"
v-if="activeFields.length > 0"
stacked="md"
:items="cptItems" :fields="activeFields" :current-page="currentPage" :per-page="perPage"
:filter="filter" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" @filtered="onFiltered"
:tbody-tr-class="rowClass"
>
<template slot="actions" slot-scope="row">
<b-button size="sm" @click="row.toggleDetails">
{{ row.detailsShowing ? 'Hide' : 'Show' }} Details
</b-button>
</template>
<template slot="row-details" slot-scope="row">
<b-card>
<b-card-text id="msg" class="text-break text-left" v-html="row.item.message"></b-card-text>
</b-card>
</template>
</b-table>