vue循环出来的这种结构如何控制显示隐藏

Question

点击二级菜单如何控制三级菜单的显示隐藏

<template>
  <div class="hello">
    <ul>
      <li v-for="(item,index) in options" :key="index">
        <div class="a_menu">{{ item.label }}</div>
        <div class="b_menu">
              <span v-for="(i,index) in item.children" :key="index" @click="showCont(index)">{{ i.label }}
                <div v-if="">
                  <div v-for="(x,index) in i.children" :key="index" class="c_menu">{{ x.label }}</div>
                </div>
              </span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      thisIndex: -1,
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }]
        }]
    }
  },
  methods: {
    showCont (index) {
      //   if (this.thisIndex === null) {
      //     this.thisIndex = index
      //   }else {
      //     this.thisIndex = null
      //   }
    },
  }
}
</script>

<style scoped>
ul {
  margin-top: 30px;
  padding-right: 40px;
}

li {
  overflow: auto;
  list-style: none;
  margin-bottom: 20px;
  line-height: 35px;
}

.a_menu {
  float: left;
  font-size: 18px;
  font-weight: bold;
  color: #507ab7;
  width: 200px;
}

.b_menu {
  float: left;
}

span {
  display: inline-block;
  margin: 0 30px 0 0;
  color: #6c6c6c;
}
</style>

Answer 1

二级菜单可以考虑增加一个属性控制是否展开三级菜单, 然后在二级菜单的click事件直接把二级菜单传进去,不用传index

Answer 2

给编个号就行，比如：

<template>
  <div class="hello">
    <ul>
      <li v-for="(item,index1) in options" :key="index">
        <div class="a_menu">{{ item.label }}</div>
        <div class="b_menu">
              <span v-for="(i,index2) in item.children" :key="index" @click="showCont(index)">{{ i.label }}
                <div v-if="index1 === menuIndex[0] && index2 === menuIndex[1]">
                  <div v-for="(x,index) in i.children" :key="index" class="c_menu">{{ x.label }}</div>
                </div>
              </span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      menuIndex: [-1,-1] // 分别为1，2级菜单项目索引
    }
  }
}