同一行中有多个展开按钮

Question

使用最新版本的Vue，我如何在同一行中有两列带有“显示详细信息”按钮的按钮，它们分别显示完全不同的信息？

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<b-table striped hover :items="loadSelected">
  <!-- Compartment Row -->
  <template slot="compartmentSummary" slot-scope="compartmentrow">
                        <b-button size="sm" @click="compartmentrow.toggleDetails" class="mr-2">
                        {{ row.detailsShowing ? 'Hide' : 'Show'}} Details
                        </b-button>
                     </template>
  <template slot="row-details" slot-scope="compartmentrow">
                         <b-table striped hover :items="compartmentrow.item.compartmentSummary">
                             <template slot="show_details" slot-scope="r">
                                 {{ r.compartmentNumber }}
                             </template>
</b-table>
</template>
<!-- Product Row -->
<template slot="productSummary" slot-scope="productrow">
                        <b-button size="sm" @click="productrow.toggleDetails" class="mr-2">
                        {{ productrow.detailsShowing ? 'Hide' : 'Show'}} Details
                        </b-button>
                    </template>
<template slot="productrow-details" slot-scope="productrow">
                        <b-table stripped hover :items="productrow.item.product">
                            <template slot="show_details" slot-scope="pr">
                                {{ pr.product}}
                            </template>
</b-table>
</template>
</b-table>