动态折叠组件在 bootsrap-vue 中不起作用

Question

我正在尝试将引导 vue 中的折叠组件添加到我正在创建的表中(不是 bootstrap-vue 表，因为发现使用普通表更容易(

谁能告诉我为什么这按预期工作(但显然使用相同的ID打开每个折叠组件(

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

但这不起作用，我知道我在 case.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>

非常感谢

Answer 1

您没有在id="'collapse-' + case.id"中设置正确的属性绑定。它适用于v-b-toggle="'collapse-' + case.id"因为如文档中所述

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

如果是属性，则应使用以下方法之一：

胡子

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

V-绑定

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

速记：

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