How to show first b-collapse used it with v-for?-CodePudding

I want to show only first b-collapse on first render.

<div v-for="(item, index) in items">
  <b-button v-b-toggle="`collapse-${ item.id }`" >{{ item.name }}</b-button>
  <b-collapse :visible="index === 0" :id="`collapse-${ item.id }`">
    <b-card>{{ item.description }}</b-card>
  </b-collapse>
</div>

How to fix it?

CodePudding user response：

Instead of :visible, You can try below mentioned any of the solution :

<b-collapse v-show="index === 0" :id="`collapse-${ item.id }`">
  <b-card>{{ item.description }}</b-card>
</b-collapse>

---- OR ----

<b-collapse :style="{visibility: (index === 0) ? 'visible' : 'hidden'}" :id="`collapse-${ item.id }`">
  <b-card>{{ item.description }}</b-card>
</b-collapse>