展开/折叠引导 Vue.js 表中的所有操作

Question

我制作了一个 Vue.js 引导表，用于从本地 JSON 文件加载一些数据。我已经实现了显示/隐藏特定行详细信息的选项（显示特定行的完整数据消息）。我正在尝试实现一个复选框或一个按钮，我可以在其中展开/折叠（显示/隐藏）所有行的详细信息。我已经尝试了一些东西，但它似乎不起作用。我对 Vue 的经验并不多。 https://imgur.com/BaTfgci --> 这是应用程序现在的样子 https://codepen.io/frane_caleta/pen/KKPMKrL --> 我的代码的codepen，你将无法加载它虽然没有 JSON 文件 https://imgur.com/a/23jx0lZ --> JSON 数据示例

随时询问您是否需要有关此应用程序/项目的更多详细信息！

我在其中显示/隐藏特定行的详细信息的部分代码：

 <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>