Menu usage of iview - Codes Helper - Programming Question Answer

I use iView"s , but when I use it, I have two problems:

1) by default, my active-name= "Home Navigation" in the code will not be highlighted. Here is the result that appears when I press the mouse:

< hr >

my data :

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;

my component code :

<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>