动态折叠组件在 bootstrap-vue 中不起作用答案

【问题标题】：Dynamic collapse component not working in bootsrap-vue动态折叠组件在 bootstrap-vue 中不起作用
【发布时间】：2018-12-01 21:30:52
【问题描述】：

我正在尝试将 bootstrap-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>

非常感谢

【问题讨论】：

标签： vuejs2 bootstrap-vue

【解决方案1】：

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

指令属性值应该是绑定表达式

如果是属性，您应该使用以下之一：

mustache

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

v-bind

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

shorthand :

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

【讨论】：