Question

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

<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，塌陷1]”和其他变体，但是并没有偶然发现实现这一目标的方法。

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

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

>

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

如果没有，是否有一种方法可以在没有填充component对象的情况下实现refs解决方案？

而且，如果没有这三个条件，那么有人能举例说明使用父变量/子prop /子变量类型的场景成功完成此操作的方法吗？

谢谢！

Answer 1

我遇到了同样的问题，我的解决方法是在b折叠上放置动态引用：

v-for =“（句点，索引），按周期”和：b每个折叠元素（动态生成）上的：ref =“'period'+ index”

然后访问组件的show变量：

@app.route('/send_pic',methods=['GET','POST'])
def button_pressed():
    print("Image recieved")
    data_url = request.values['imageBase64']
    # Decoding base64 string to bytes object
    offset = data_url.index(',')+1
    img_bytes = base64.b64decode(data_url[offset:])
    img = Image.open(BytesIO(img_bytes))
    img  = np.array(img)
    cv2.imshow(img)
    cv2.waitKeys(0)
    cv2.destroyAllWindows()
    return ""

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

1 个答案: