CODEWITHSUNDEEP
vuejs2bootstrap-vue
Paul
Paul

Reputation: 625

Dynamic collapse component not working in bootsrap-vue

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

Upvotes: 0

Views: 4153

Answers (1)

pkawiak
pkawiak

Reputation: 1329

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>

Upvotes: 3

Related Questions