web-dev-qa-db-fra.com

Tiroir de navigation Vuetify avec sous-menus

Comme le titre dit, j'essaie d'avoir un tiroir de navigation contenant des sous-menus extensibles pour certaines options. Comme un "profil d'utilisateur" option de menu principal pourrait avoir un sous-menus "Mettre à jour les coordonnées" et "Enregistrement d'examen".

J'ai essayé cela une poignée de manières, essentiellement descendant aux deux mêmes questions. Parce que chaque option de menu est un tuile de liste, le sous-menu est empilé à droite (comme dans, l'ensemble du sous-menu est dans la même tuile), ou la liste complète des options de menu contient ces icônes déroulantes. , lorsque seule une seule option de menu a réellement un sous-menu. De plus, mon deuxième extrait de code ci-dessous vous empêche de naviguer à l'un des principaux liens de menus, ce qui n'est pas ce qui est recherché.

Exemple 1, où le sous-menu est bloqué dans la même tuile que l'option de menu principal.

<div v-for="(link, i) in links" :key="i">
    <v-list-tile v-if="!link.subLinks" :to="link.to" :active-class="color" avatar class="v-list-item">
        <v-list-tile-action>
            <v-icon>{{ link.icon }}</v-icon>
        </v-list-tile-action>
        <v-list-tile-title v-text="link.text"/>
    </v-list-tile>

    <div v-else>
        <v-list-tile avatar class="v-list-item">
            <v-list-tile-action>
                <v-icon>{{ link.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-title v-text="link.text"/>
            <v-list-group>
                <v-list-tile sub-group v-for="(subLink, j) in link.subLinks" :key="j" :to="subLink.to" :active-class="color" avatar class="v-list-item">
                    <v-list-tile-title v-text="subLink.text"/>
                </v-list-tile>
            </v-list-group>
         </v-list-tile>
     </div>
</div>

Exemple 2, dans lequel chaque option de menu a une flèche déroulante, même des sous-menus n'ont pas de sous-menus.

<v-list-group v-for="(link, i) in links" :key="i" :prepend-icon="link.icon" :to="link.to" :active-class="color" avatar class="v-list-item">
    <template v-slot:activator>
        <v-list-tile>
            <v-list-tile-title>{{ link.text }}</v-list-tile-title>
        </v-list-tile>
    </template>

    <v-list-tile v-for="(subLink, j) in link.subLinks" :key="j" :to="subLink.to" :active-class="color">
        <v-list-tile-content>
            <v-list-tile-title>{{ subLink.text }}</v-list-tile-title>
        </v-list-tile-content>
    </v-list-tile>
</v-list-group>

Ceci est un échantillon des données que j'utilise

links: [
    {
        to: '/',
        icon: 'mdi-view-dashboard',
        text: 'Dashboard',
    },
    {
        icon: 'mdi-account',
        text: 'User Profile',
        subLinks: [
            {
                to: '/update-contact',
                text: 'Update Contact Details',
            },
            {
                to: '/review-registration',
                text: 'Review Registration',
            },
        ],
    },
],

Ce que j'aimerais pouvoir faire, c'est avoir un menu principal, avec la possibilité d'ajouter des sous-menus comme je le vois. Malheureusement, je ne peux pas sembler comprendre comment mélanger et faire correspondre le groupe de liste et la liste de liste pour obtenir ce que je veux faire. Je suis super reconnaissant pour toute aide fournie. Merci.

vue.jsvuetify.js
7
Devildude4427

Je viens de trouver un moyen de définir le sous-menu de la classe Active. J'espère que cela peut aider les autres. Merci à Vuejs-Linusborg.

<template>
......
<v-list-group
  v-else
  :key="link.text"
  no-action
  :prepend-icon="link.icon"
  :value="subIsActive('/parentroute')"
>
<template v-slot:activator>
  <v-list-item-title>{{ link.text}}</v-list-item-title>
</template>
    
<v-list-item
  v-for="sublink in link.subLinks"
  :to="sublink.to"
  :key="sublink.text"
  :active-class="`success white--text`"
>
 <v-list-item-icon>
   <v-icon>{{ sublink.icon }}</v-icon>
 </v-list-item-icon>
 <-list-item-title>{{ sublink.text}}</v-list-item-title>
 </v-list-item>
</v-list-group>
...
</template>
<script>
...
methods:{
  subIsActive(input) {
    const paths = Array.isArray(input) ? input : [input];
    return paths.some((path) => {
    return this.$route.path.indexOf(path) === 0; // current path starts with this path 
    string
  });
},
....
}</script>
0
Young Altair