如何用vue实现二级菜单栏

Question

这是我的代码<div class="menu-parent" v-for = "item in menu" :class="parentColor">     <p v-text="item.name" class="top-title" @click="toggleShow($index)"></p>     <ul v-show="menu[$index].child" class="menu-child">          <li v-for="items in item.child" @click="childCheck($index)" >                  <a v-text="items.name" :class="shoope"></a>           </li>     </ul></div><script>import Menu from '../../libs/menu';export default {  data () {    return {      msg: '登录之后的主页面',      menu:[],      shoope:false,      ishow:false,      i:-1,      parentColor:false    }  },  ready(){      this.menu = Menu.menu;  },  methods:{      toggleShow:function($index){        $('.menu-parent >ul').eq($index).slideToggle(500);      },      childCheck:function($index){          $('ul li').eq($index).children('a').addClass('childclick');      }  }}</script><style>.childclick{    background: #FFFFFF;    color: #4E8CEE;}.parentclick{    background: #C0CFE0;    color: #6684B5;}</style>设计图是这样的求各位大神指教