使用bootstrap-vue的Vue：在列表中始终阻止多个扩展列表元素（v-for）

Question

我正在使用vue和bootstrap-vue以及b-collapse的功能，在这种情况下，它用于v-for（列表）..

它运行良好，除了我无法弄清楚当单击一个新的list-element进行扩展时如何自动关闭展开的列表元素。

所以我的问题是：

当我点击一个新的列表元素进行扩展时，如何关闭展开的？

备注：我正在使用如下唯一值生成v-b-toggle =“”：

<i v-b-toggle="'collapse' + key + index"

这是我的代码：

<div v-for="(item, key, index) in nluData">
   <div v-for="(item, key, index) in nluData">
       <div class="alert alert-warning">
           <i v-b-toggle="'collapse' + key + index">&nbsp;</i>
       </div>

   <b-collapse :id="'collapse' + key + index">
       <b-card style="background-color:#f0f8ff; margin-right:-30px;">
           ....
       </b-card>
   </b-collapse>
</div>

@ sklingler93之后的更新建议：

更改为以下内容：

<i @click="expanded=key">&nbsp;</i>
<b-collapse :id="'collapse' + key + index" visible="key == expanded">

Vue数据属性：

 export default {
data() {
      return {
          expanded: 0
          }
      }

我尝试了扩展的不同类型（字符串，布尔值，整数）这最终扩展了所有内容，并且以下警告如何：

无效的道具：支柱“可见”的类型检查失败。预期布尔值，得到字符串。

Answer 1

b-collapse有一个可以设置的可见属性。因此，如果您在data中声明一个变量以跟踪扩展哪个b-collapse，您可以使用：

<div v-for="(item, key, index) in nluData">
   <div v-for="(item, key, index) in nluData">
       <div class="alert alert-warning">
           <i @click="expanded=key">&nbsp;</i>
       </div>

   <b-collapse :visible="key === expanded">
       <b-card style="background-color:#f0f8ff; margin-right:-30px;">
           ....
       </b-card>
   </b-collapse>
   </div>
</div>