如何使用 Bootstrap-Vue 从父组件折叠/展开多个动态折叠？

Posted 2023-02-16

【中文标题】如何使用 Bootstrap-Vue 从父组件折叠/展开多个动态折叠？

【英文标题】：How do I collapse/expand multiple dynamic collapses from parent component with Bootstrap-Vue?

【发布时间】：2019-01-09 04:01:33

【问题描述】：

在父组件中，我有以下内容：

<b-col cols="2">
    <b-btn v-b-toggle.collapse0.collapse1 variant="secondary" size="sm"><i class="fas fa-bars"></i></b-btn>
</b-col>

“collapse0”和“collapse1”目前是我在子组件中动态生成的折叠的硬编码 id，如下所示：

<b-collapse :id="'collapse' + index" class="mt-2">

每个都有自己的折叠/展开按钮，如下所示：

<b-btn v-b-toggle="'collapse' + index" variant="secondary" size="sm"><i class="fas fa-bars"></i></b-btn>

我没有看到任何记录在案的方式来动态完成展开/折叠多个。我摆弄了 v-b-toggle="[collapse0, collapse1]" 和其他变体，但还没有找到实现这一目标的方法。

我还尝试让父按钮只更新一个数据变量，我将其作为道具发送给子组件。这种方法似乎让我更进一步，除了在这种情况下，据我了解，我必须执行 v-model="some data variable here" 来更改折叠状态。所以我可以得到道具，最初将变量设置为它，并且最初可以工作，但在没有观察者的情况下不会对道具的更改做出反应，这对我来说似乎不必要地复杂。我也不确定这种方法将如何与单个折叠上的切换按钮进行交互，也不知道它应该如何与父按钮进行通信。

我查看了this solution，但我无法弄清楚如何实现它，特别是因为我没有在父母的“compoment”对象中声明子组件。

所以，这里的问题之一是——有没有办法动态地将多个折叠 ID 传递给 v-b-toggle 元素？

如果没有，有没有办法在没有填充组件对象的情况下实现 refs 解决方案？

而且，如果这三个都失败了，是否有人举例说明他们使用父变量/子道具/子变量类型的场景成功地做到了这一点？

提前致谢！

【参考方案1】：

我遇到了同样的问题，我的做法是在 b-collapse 上放置一个动态引用：

v-for="(period,index) in period" 和 :ref="'period'+index" 在每个 b-collapse 元素上（动态生成）

然后访问组件的显示变量：

        OpenAllCollapse() 
            for (var i = 0; i < this.periods.length; i++) 
                this.$refs["period" + i][0].$data.show = true