<b-collapse> 单击按钮时全部关闭(开始可见)

Question

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

现在，当我的parent.vue中的toggle将被触发时，我需要将它们设为none visible——因此，在我的parent.vue中单击我的CCD-6后，我需要关闭所有内容，当我重新触发它并打开完整的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>

Answer 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>