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