0

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

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

所以我的问题是：

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

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

我在扩展（字符串，布尔值，整数）上尝试了不同的类型这最终得到了所有扩展和以下警告：

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

4

1 回答 1

2

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>

于 2018-02-28T22:30:20.000 回答