Dynamic collapse component not working in bootsrap-vue

Question

I am trying to add a collapse component from bootstrap-vue into a table I am creating (Not bootstrap-vue table as find it easier to use plain table)

Can anyone tell me why this works as expected (But obviously opens every collapse component with the same 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>

But this doesn't work, I know i have a unique id in 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>

Many Thanks

pkawiak pkawiak · Accepted Answer · 2018-06-22T12:08:27

You are not setting up a proper attribute binding in id="'collapse-' + case.id". It works in v-b-toggle="'collapse-' + case.id" case because as stated in the docs

Directive attribute values are expected to be binding expressions

In case of attributes you should use one of the following:

mustache

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

v-bind

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

shorthand :

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

Dynamic collapse component not working in bootsrap-vue

1 Answers