如何用vue.js中的index

<template>
<div class="wrapper-app">

<div class="main-nav"></div>
<div class="sidebar-nav">
  <strong>lizaiyang</strong>
  <span class="fa fa-fighter-jet fa-4x" aria-hidden="true"></span>
  <div class="sidebar-subpage subpage-active">
    <span class="fa fa-laptop" aria-hidden="true"></span>
    <small class="subpage-title">个人简介</small>
  </div>
  <template v-for="(index,subpage) in subpages">
    <div class="sidebar-subpage" @click="menus==!menus" v-for="arrow in subpage.arrows">
      <span :class="arrow.fa" aria-hidden="true"></span>
      <small class="subpage-title">{{arrow.small}}</small>
      <span class="arrows" :class="arrow.faArrows" aria-hidden="true"></span>
    </div>
    <ul class="subpage-ul" :class="{'subpage-menu': menus}" v-show="menus==$index">
      <li v-for='item in subpage.items'>
         <span :class="item.messages"></span>
         <small>{{item.msgs}}</small>
      </li>
    </ul>
  </template>
</div>

</div>

</template>

<script>
export default {
data () {

return {
  msg: '',
  isA:true,
  // menus:false,
  subpages: [
    {
      arrows: [
        {fa:'fa fa-list-alt',small:'组件库',faArrows:'fa fa-angle-down'}
      ],
      items:[
        {messages:'fa fa-car',msgs:'活动'},
        {messages:'fa fa-envelope',msgs:'邮件'},
        {messages:'fa fa-credit-card',msgs:'Invoice'},
        {messages:'fa fa-heart-o',msgs:'Profile'},
        {messages:'fa fa-columns',msgs:'Pricing Tables'},
        {messages:'fa fa-puzzle-piece',msgs:'404'},
        {messages:'fa fa-puzzle-piece',msgs:'500'},
        {messages:'fa fa-lock',msgs:'LockScreen1'},
        {messages:'fa fa-lock',msgs:'LockScreen2'},
        {messages:'fa fa-key',msgs:'Login Page'},
        {messages:'fa fa-sign-in',msgs:'Register Page'}
      ]
    },
    {
      arrows: [
        {fa:'fa fa-list-alt',small:'组件库',faArrows:'fa fa-angle-down'}
      ],
      items:[
        {messages:'fa fa-car',msgs:'wewew'},
        {messages:'fa fa-envelope',msgs:'邮件'},
        {messages:'fa fa-credit-card',msgs:'Invoice'},
        {messages:'fa fa-heart-o',msgs:'Profile'},
        {messages:'fa fa-columns',msgs:'Pricing Tables'},
        {messages:'fa fa-puzzle-piece',msgs:'404'},
        {messages:'fa fa-puzzle-piece',msgs:'500'},
        {messages:'fa fa-lock',msgs:'LockScreen1'},
        {messages:'fa fa-lock',msgs:'LockScreen2'},
        {messages:'fa fa-key',msgs:'Login Page'},
        {messages:'fa fa-sign-in',msgs:'Register Page'}
      ]
    }
  ]
}

},
methods: {
}
}
</script>

---

你应该在每一个subpage里都有一个menu来控制当前subpage的显示状态。结果你现在是全局就一个menu，那当然只要改了这个menu，所有的subpages都要么展开，要么关闭了