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

eufgjt7s 于 2023-03-03 发布在 Vue.js

关注(0)|答案(2)|浏览(199)

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

<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]"和其他变体，但还没有偶然发现一种实现这一点的方法。
我还尝试让父按钮只更新一个数据变量，我将其作为prop发送给子组件。这种方法似乎让我走得更远了一点，只是在这种情况下，据我所知，我必须执行v-model ="{some data variable here}"来更改折叠状态。因此，我可以获取prop，最初将变量设置为它，这种方法一开始是有效的，但在没有监视器的情况下不会对 prop 上的更改做出React，这对我来说似乎是不必要的复杂。我也不确定这种方法将如何与各个折叠上的切换按钮交互，也不确定它应如何与父按钮通信。
我已经浏览了this solution，但是还没有弄清楚如何实现它，特别是因为我没有在父组件的"compoment"对象中声明子组件。
因此，这里问题的第一部分是--有没有办法动态地将多个collapse id传递给v-b-toggle元素？
如果没有，有没有办法在不填充components对象的情况下实现refs解决方案？
如果没有这三个，有没有人有一个例子，他们成功地做到了这一点，使用父变量/子属性/子变量类型的场景？
先谢了!

vue.js

来源：https://stackoverflow.com/questions/51635703/how-do-i-collapse-expand-multiple-dynamic-collapses-from-parent-component-with-b

2条答案

按热度按时间

lsmepo6l1#

我也有同样的问题，我的做法是在b-崩溃上设置一个动态参考：
v-for="（period，index）in periods”和每个b折叠元素上的：ref=“'period'+index”（动态生成）
然后访问组件的show变量：

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

赞(0）回复(0）举报 2023-03-03

ca1c2owp2#

解决办法是