vue如何实现二级菜单与一级菜单联动

Question

设计图如此，要求为每个一级菜单点击都会有二级菜单弹出，如未选择二级菜单则默认一级菜单是二级菜单第一项，这个题是需要自己写假数据去做的，始终没想好怎么做数据会更加方便去循环列表，甚至会想到for循环一级菜单中再for循环二级菜单，求大神解答，最好附赠代码

Answer 1

主要是思路，代码不一定这样写

<template>
  <first v-for="(item,index) in list" @click="showIndex === index?(showIndex = -1):(showIndex = index)" :class="{showSecond:showIndex === index}">
    <second v-for="(v,i) in item.vList" @click="item.value = v" :class="{selected:(item.value === v || (item.value === '' && i === 0))}" @click="item.value = v"></second>
  </first>
</template>  

<script>
  ...
  data(){
    return {
      showIndex: -1,
      list: [{
        label: '金重范围',
        value: '',
        vList: ['0-0.99', '1-2.99'],
      }, {
        label: '成色',
        value: '',
        vList: ['18K金', '24K金']
      }]
    }
  }
  ...
</script>

Answer 2

两层for循环没毛病