element-ui 框架中使用 NavMenu 导航菜单组件时，点击一个子菜单会出现多个子菜单同时展开或折叠？

我在使用 elment-ui 框架的导航组件时，直接粘贴复制了官网上 （http://element-ui.cn/#/zh-CN/component/menu）的例子不会出错，但是当我将他们转化为动态的时候，发现我点击其中的一个子菜单，其他的也会跟着展开或者折叠，如下：

呃~ 看看代码的确跟 index 有关，看了官网只知道它是一个唯一标识且默认值为空，殊不知还有这般影响，是我大意了，把 index 忽略没有设置，导致所有的都为空，也就失去了唯一的价值了，直接贴上我写对的代码吧：

 <template v-for="item in SideMenuItems">
   <el-submenu v-if="item.children!=''||item.children!=null" :key="item.id" :index="item.id">
     <template slot="title">
       <i :class="item.icon"></i>
       <span>{{item.title}}</span>
     </template>
     <el-menu-item v-for="child in item.children" :key="child.id">
       <router-link to="child.url">{{child.title}}</router-link>
     </el-menu-item>
   </el-submenu>
   <el-menu-item v-else  :key="item.id">
     <i :class="item.icon"></i>
     <span>{{item.title}}</span>
   </el-menu-item>
 </template>