1

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

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

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

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

我已经查看了这个解决方案，但我无法弄清楚如何实现它，特别是因为我没有在父母的“组件”对象中声明子组件。

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

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

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

提前致谢！

4

1 回答 1

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
            }
        }
于 2019-01-15T12:48:00.693 回答