Javascript 如何使用JSON/对象数据在Vue JS中创建动态菜单/SideNav

我在vue组件中保存了来自API的这些数据。看起来是这样的，（请忽略语法错误）

我想要的是做一个动态的侧导航栏菜单，在那里可以显示第一批男性、女性和电子产品。然后，如果我点击男士，上面和下面都会显示出来。再次，如果我点击电子设备，智能手机和功能手机将显示。就像任何电子商务网站的sidenav一样

知道如何使用vue js实现这一点吗？

使用v-for

var example1=新的Vue({
el:“#示例1”，
数据：{
项目：[
{
id:1，
名字：“男人”，
秀:假,，
子项：[{name:“top”}，{name:“Bottom”}]
},
{
id:2，
姓名：'妇女'，
秀:假,，
子项：[{name:“top”}，{name:“Bottom”}]
},
{
id:3，
名称：'电子'，
秀:假,，
孩子：[{name:“智能手机”}，{name:“功能手机”}]
},
]
}
})

{{item.name}


{{children.name}

使用v-for

var example1=新的Vue({
el:“#示例1”，
数据：{
项目：[
{
id:1，
名字：“男人”，
秀:假,，
子项：[{name:“top”}，{name:“Bottom”}]
},
{
id:2，
姓名：'妇女'，
秀:假,，
子项：[{name:“top”}，{name:“Bottom”}]
},
{
id:3，
名称：'电子'，
秀:假,，
孩子：[{name:“智能手机”}，{name:“功能手机”}]
},
]
}
})

{{item.name}


{{children.name}

一种方法是：

• 向每个菜单项添加额外属性

  isOpen:false

• 然后通过添加

  @单击
  侦听器并将菜单项作为参数传递，切换
  isOpen
  属性
  
  <div id="side-bar">
      <ul>
          <li v-for="item in menu">
              <div>
                  <h4 @click="toggleChildren(item)">{{item.name}}</h4>
                  <ul v-show="item.isOpen">
                      <li v-for="subItem in item.children">{{subItem.name}}</li>
                  </ul>
              </div>
          </li>
      </ul>
  </div>  
  
  这是一种方法，这是：
  
  
  向每个菜单项添加额外属性
  isOpen:false
  
  然后通过添加
  @单击
  侦听器并将菜单项作为参数传递，切换
  isOpen
  属性
  
  <div id="side-bar">
      <ul>
          <li v-for="item in menu">
              <div>
                  <h4 @click="toggleChildren(item)">{{item.name}}</h4>
                  <ul v-show="item.isOpen">
                      <li v-for="subItem in item.children">{{subItem.name}}</li>
                  </ul>
              </div>
          </li>
      </ul>
  </div>  
  
  这是
  我需要将其显示为响应菜单。如果我单击父元素（男性或女性或电子产品），则将分别显示子菜单（{top，Bottom}或{top，Bottom}或{Smart Phone，Feature Phone}）。一个简单的迭代不会给我这个，我需要像一个响应菜单一样显示它。如果我单击父元素（男性或女性或电子产品），则将分别显示子菜单（{top，Bottom}或{top，Bottom}或{Smart Phone，Feature Phone}）。一个简单的迭代不会给我这个。
  new Vue({
      el: '#side-bar',
      data:{
                  menu:[
              {
                  id: 1,
                  name: 'Men',
                  children: [{name: "Tops"}, {name: "Bottom"}],
                  isOpen:false
              },
              {
                  id: 2,
                  name: 'Women',
                  children: [{name: "Tops"}, {name: "Bottom"}],
                  isOpen:false
              },
              {
                  id: 3,
                  name: 'Electronics',
                  children: [{name: "Smart Phone"}, {name: "Feature Phone"}],
                  isOpen:false
              }
          ] 
  
      },
      methods:{
          toggleChildren(item){
              item.isOpen = !item.isOpen
          }
      }
  
  });