如何显示第一个 b-collapse 与 v-for 一起使用？

Question

我只想在第一次渲染时显示第一个 b-collapse。

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

如何解决？

Answer 1

而不是:visible，您可以尝试下面提到的任何解决方案：

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

---- 或 ----

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

如何显示第一个 b-collapse 与 v-for 一起使用？

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

twitter-bootstrap

vue.js

nuxt.js

bootstrap-vue