Question

我的这些数据来自vue组件中的API。它看起来像这样，（请忽略语法错误）。

[
{
id: 1,
name: "Men",
children: [{name: "Tops"}, {name: "Bottom"}]
},
{
id: 2,
name: "Women",
children: [{name: "Tops"}, {name: "Bottom"}]
},
{
id: 3,
name: "Electronics",
children: [{name: "Smart Phone"}, {name: "Feature Phone"}]
},
.
.
.
]

我想要的是创建一个动态侧导航栏菜单，其中将显示第一个男人，女人和电子产品。然后如果我点击Men，将显示Tops和Bottoms。如果我点击电子设备，将再次显示智能手机和功能手机。就像在任何电子商务网站的sidenav。

任何想法如何使用vue js实现这一目标？

Answer 1

使用v-for

var example1 = new Vue({
  el: '#example-1',      
  data: {
    items: [
      {
        id: 1,
        name: 'Men',
        show: false,
        children: [{name: "Tops"}, {name: "Bottom"}]
      },
      {
        id: 2,
        name: 'Women',
        show: false,
        children: [{name: "Tops"}, {name: "Bottom"}]
      },
      {
        id: 3,
        name: 'Electronics',
        show: false,
        children: [{name: "Smart Phone"}, {name: "Feature Phone"}]
      },
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>

<ul id="example-1">
  <li v-for="item in items" >
    <button v-on:click="item.show = !item.show">
      {{item.name}}
    </button>
    <ul v-if="item.show">
      <li v-for="children in item.children">
        <button>
          {{children.name}}
        </button>
      </li>
    </ul>
  </li>
</ul>

Answer 2

这种做法的一种方式是：

为每个菜单项添加额外的属性isOpen: false

然后通过添加isOpen侦听器并将菜单项作为参数传递来切换@click属性

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

<强>脚本

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

});

以下是fiddle

如何使用JSON / Object数据在Vue JS中创建动态Menu / SideNav

2 个答案: