单击按钮时关闭所有 <b-collapse> （开始可见）答案

【问题标题】：单击按钮时关闭所有 <b-collapse> （开始可见）
【发布时间】：2022-01-22 20:01:24
【问题描述】：

我有以下问题。我有多个b-buttons 与b-collapse 连接，都开始可见（所以它们是打开的）。

现在我需要在我的parent.vue 中的toggle 被触发时将它们设为none visible - 所以在我的parent.vue 中单击我的button 后，我需要关闭所有这些，当我重新触发它时并打开完整的collapse all collapse 在我的child.vue 应该关闭。

我怎样才能做到这一点？

Parent.vue

<b-button class="col-5" v-b-toggle="'New' + item.id" variant="danger">
<Child :idParent="item.id"/>

Child.vue

<b-collapse visible :id="'New' + idParent">
  
  <b-button v-b-toggle="Toggle1"></b-button>
  <b-collapse visible id="Toggle1"></b-collapse>

  <b-button v-b-toggle="Toggle2"></b-button>
  <b-collapse visible id="Toggle2"></b-collapse>

  <b-button v-b-toggle="Toggle3"></b-button>
  <b-collapse visible id="Toggle3"></b-collapse>

</b-collapse>

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

实现此目的的一种方法是在父级中设置一个“可见”布尔值，通过按下按钮进行切换，然后将其传递给子级以在按钮元素中使用。例如：

父.vue

<b-button class="col-5" v-b-toggle="'New' + item.id" variant="danger" @click="!buttons_visible">
<Child :idParent="item.id" :buttons_visible="buttons_visible" />

Child.vue

<b-collapse visible :id="'New' + idParent">
  <b-button v-b-toggle="Toggle1"></b-button>
  <b-collapse :visible="buttons_visible" id="Toggle1"></b-collapse>

  <b-button v-b-toggle="Toggle2"></b-button>
  <b-collapse :visible="buttons_visible" id="Toggle2"></b-collapse>

  <b-button v-b-toggle="Toggle3"></b-button>
  <b-collapse :visible="buttons_visible" id="Toggle3"></b-collapse>
</b-collapse>

【讨论】：