iview的menu使用

Question

我使用iView的menu，可是当我使用的时候，有2个问题：

1）默认不会高亮我在代码中的active-name="首页导航"，这里是我鼠标放上去才出现的结果：

2）我点击任意一个子选项，全部都变为了高亮：

---

我的数据：

const website_settings = {
  // 网站的设置的 menu 的数据
  website_settings_menu_data: [
    {
      "name":"网站首页设置",
      "icon":"settings",
      "groups": [
        {
          "name": "网站首页",
          "icon": "settings",
          "children": [
            {
              "name": "首页导航",
              "route": "" // 跳转路径
            },
            {
              "name": "一级轮播",
              "route": "" // 轮播图
            },
            {
              "name": "二级轮播",
              "route": "" // 跳转路径
            },
            {
              "name": "产品设置",
              "route": "" // 跳转路径
            },
            {
              "name": "公司展示",
              "route": "" // 跳转路径
            },
            {
              "name": "合作公司",
              "route": "" // 跳转路径
            },
            {
              "name": "首页新闻",
              "route": "" // 跳转路径
            },
            {
              "name": "地图导航",
              "route": "" // 跳转路径
            },
            {
              "name": "页脚导航",
              "route": "" // 跳转路径
            }
          ]
        }
      ]
    },
    {
      "name":"网站新闻页设置",
      "icon":"settings",
      "groups": [
        {
          "name": "网站新闻页设置",
          "icon": "settings",
          "children": [
            {
              "name": "网站新闻页设置",
              "route": "" // 跳转路径
            }

          ]
        }
      ]
    },
    {
      "name":"文档设置",
      "icon":"settings",
      "groups": [
        {
          "name": "文档设置",
          "icon": "settings",
          "children": [
            {
              "name": "文档设置",
              "route": "" // 跳转路径
            }

          ]
        }
      ]
    },
    {
      "name":"关于我们设置",
      "icon":"settings",
      "groups": [
        {
          "name": "关于我们设置",
          "icon": "settings",
          "children": [
            {
              "name": "关于我们设置",
              "route": "" // 跳转路径
            }
          ]
        }
      ]
    },
    {
      "name":"实体服务器页面设置",
      "icon":"settings",
      "groups": [
        {
          "name": "实体服务器页面设置",
          "icon": "settings",
          "children": [
            {
              "name": "实体服务器页面设置",
              "route": "" // 跳转路径
            }

          ]
        }
      ]
    },
    {
      "name":"通知公告设置",
      "icon":"settings",
      "groups": [
        {
          "name": "公告设置",
          "icon": "settings",
          "children": [
            {
              "name": "公告设置",
              "route": "" // 跳转路径
            }

          ]
        }
      ]
    }
  ]
}

export default website_settings;

我的组件代码：

<template>
  <Menu mode="horizontal" theme="light" active-name="首页导航">
    <Submenu v-for="(setting_item, i) in website_settings_config_data" :name="setting_item.name">
      <template slot="title">
        <Icon :type="setting_item.icon"></Icon>
        {{ setting_item.name }}
      </template>
      <MenuGroup v-for="(group, j) in setting_item.groups" :title="group.name">
        <MenuItem v-for="(child, k) in group.children" name="child.name">{{child.name}}</MenuItem>
      </MenuGroup>
    </Submenu>
  </Menu>
</template>

<script>

  import website_settings_config_data from './config-data/website-settings-config-data'

  export default{
    data(){
      return {
        website_settings_config_data: website_settings_config_data.website_settings_menu_data
      }
    },
    components: {},
    computed: {

    }
  }

</script>


    

Answer 1

找到了问题，原来这一行没有绑定:name：

<MenuItem v-for="(child, k) in group.children" name="child.name">{{child.name}}</MenuItem>

Answer 2

请教下，点击上面的菜单后，左边的菜单是怎么异步更新的，就是左边的菜单要获取数据后重新渲染，请问应该怎么实现？望指教！