两个按钮只能打开/关闭一个可扩展菜单另一个应该在Vuejs中展开/关闭所有这些控件

编程问答 2022-08-16

问题描述

我有两个按钮。其中之一打开/关闭正在选择的菜单。另一个应同时打开/关闭所有菜单。我编写了执行第一部分的代码。但是我无法完成第二部分。



<template>
 <!--this button works. 'num' is a dynamic number associated with the selected div-->
 <button
  class="btn"
  type="button"
  data-toggle="collapse"
  :data-target="`#collapse${num}`""
  aria-expanded="false"
  aria-controls="collapseExample"
 >
  open-close one
 </button>

 <!--this button doesn't work. tried using refs but didn't work-->
 <button
  class="btn"
  type="button"
  data-toggle="collapse"
  :data-target="`$refs.collapse`"
  aria-expanded="false"
  aria-controls="collapseExample"
 >
  open/close all
 </button>

 <div class="collapse" :id="`collapse${num}`" ref="collapse">
  john
 </div>
</template>

我们遍历上面的代码，因此第一个数据目标变为:data-target=#collapse1。第二个变成:data-target=#collapse2，依此类推。与div相同。第一个ID变为:id="collapse1，第二个:id="collapse2，依此类推。如您所见，我尝试使用ref打开/关闭所有窗口，但是没有用。什么是让一个按钮打开/关闭目标div，而另一个按钮打开/关闭所有div的最佳方法？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-4collapseexpandhtmljavascript