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>