Vuejs2 动态折叠组件在bootsrap vue中不工作

我正在尝试将引导vue中的折叠组件添加到我正在创建的表中（不是引导vue表，因为它更易于使用普通表）

有人能告诉我为什么这会像预期的那样工作（但显然会打开每个具有相同ID的折叠组件）

在此处折叠内容

但这不起作用，我知道我有一个唯一的id以防万一

<td>
  <fa icon="bars" v-b-toggle="'collapse-' + case.id" />  
</td>
</tr>
 <td colspan="4">
  <b-collapse id="'collapse-' + case.id" >
    <b-card>
      <p class="card-text">Collapse contents Here</p>
    </b-card>
  </b-collapse>
 </td>

在此处折叠内容

---

非常感谢

您没有在

id=“'collapse-”+case.id“

中设置正确的属性绑定。它在

v-b-toggle=“'collapse-'+case.id”

情况下工作，因为

指令属性值应为绑定表达式

对于属性，您应使用以下选项之一：

---

您没有在

id=“'collapse-”+case.id“

中设置正确的属性绑定。它在

v-b-toggle=“'collapse-'+case.id”

情况下工作，因为

指令属性值应为绑定表达式

对于属性，您应使用以下选项之一：

<td>
  <fa icon="bars" v-b-toggle="'collapse-' + case.id" />  
</td>
</tr>
 <td colspan="4">
  <b-collapse id="'collapse-' + case.id" >
    <b-card>
      <p class="card-text">Collapse contents Here</p>
    </b-card>
  </b-collapse>
 </td>

<div id="item-{{ id }}"></div>

<div v-bind:id="'item-' + id"></div>

<div :id="'item-' + id"></div>