带有 bootstrap-vue 的 Vue：在列表中始终防止多个扩展列表元素（v-for）

Posted 2023-02-23

【中文标题】带有 bootstrap-vue 的 Vue：在列表中始终防止多个扩展列表元素（v-for）

【英文标题】：Vue with bootstrap-vue : prevent more than one expanded list-element at all times in list (v-for)

【发布时间】：2018-08-08 22:10:05

【问题描述】：

我正在使用带有 bootstrap-vue 和 b-collapse 功能的 vue，在这种情况下，它用于 v-for (lists)..

它工作得很好，除了我不知道如何在单击新列表元素进行扩展时自动关闭扩展的列表元素..

所以我的问题是：

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

备注：我正在生成具有唯一值的 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
          
      

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

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

【参考方案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>