Home>
Unclear points and what I want to do
Nested list links could be realized with v-list-item, but I don't know how to link non-nested items.
For the following sources, I want the dashboard link to go through.
<v-list nav dense>
<v-list-group
v-for = "menu in menus"
: key = "menu.name"
: prepend-icon = "menu.icon"
no-action
: append-icon = "menu.subMenus? undefined: ''">
<template v-slot: activator>
<v-list-item-content>
<v-list-item-title>{{menu.title}}</v-list-item-title>
</v-list-item-content>
</template>
<v-list-item v-for = "subMenu in menu.subMenus": key = "subMenu.title": to = "subMenu.link">
<v-list-item-content>
<v-list-item-title>{{subMenu.title}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
</v-list>
menus: [
{title: 'Dashboard', icon: 'dashboard', link: '/ dashboard'},
{title: 'System configuration', icon: 'system_update_alt',
subMenus: [
{title: 'System configuration', link: '/ system'},
{title: 'Time setting', link: '/ time'},
],
},
],
I tried to implement v-list-item in the template and implemented it in the template, but it was not displayed correctly.
FinallyIf i understand, I would appreciate it if you could teach me.
-
Answer # 1
Related articles
- vuejs - i want to show/hide the attributes of vuetify
- vuetify (vuejs) does not generate a click event for the second transition
- vuejs - i want to achieve nested routing using vue router
- vuejs - comma separated method in vuetify text field
- vuejs - i want to be able to use nested sidebar in vuepress
- vuejs - is it a specification that items of vuetify v-data-table are not reactive? (paginationsync)
- i want to install vuetify on vuejs but get an error
- vuejs - vuetify v-data-table is not working
- vuejs - vuetify doesn't work in production
- vuejs - how to use vuetify props
- vuejs - how to place v-btn at the top and bottom center in vuetify
- vuejs - [vuetify] unable to locate target [data-app] i want to unit test to avoid warning
- vuejs - can't change vuetify css
- vuejs - vuetify this cannot be used in v-menu
- javascript - [vuejs] i want to monitor the value of a nested object with watch and change the data
- vuejs - about a program with a vuetify document not working
- vuejs - about the text color of vuetify v-select choices
- vuejs examples of nested loops, if judgments, and dynamic deletion
- vuejs double nested for traversal method, similar to php foreach ()
Related questions
- html - svg is not displayed when displaying pagenation using vuetify
- vuejs - when i install axios on nuxt, i get an error message
- is it possible to create dynamic breadcrumbs with vuetify/vuejs?
- css - about changing background color height when mouse hovering tab
- vuejs - how to set the initial value of v-text-field
- typescript - nuxt about validation check using js
- i want to display vuetify data table with codepen the language uses typescript
- javascript - i want to get it randomly from an array with vuejs
- javascript - acquire one character from the data array in vuejs when pressing the button
- javascript - i want to display characters in a text field when i press a button in vuetify
By branching as above, we were able to cope.
Reference source code