Vue 与 bootstrap-vue ：始终防止列表中有多个扩展列表元素 (v-for)

Question

我将 vue 与 bootstrap-vue 和 b-collapse 特性一起使用，在这种情况下，它用于 v-for（列表）..

它运行良好，除了我不知道如何在单击新的列表元素进行扩展时自动关闭展开的列表元素。

所以我的问题是：

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

备注：我生成的 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
          }
      }

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

Invalid prop: type check failed for prop "visible". Expected Boolean, got String.

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>

Vue 与 bootstrap-vue ：始终防止列表中有多个扩展列表元素 (v-for)

Vue with bootstrap-vue : prevent more than one expanded list-element at all times in list (v-for)

javascript

vue.js

vuejs2

bootstrap-vue