Vuetify Lists: Creating Submenus from Array of objects

Question

I'm using Vue @2.5.17 and Vuetify @2.33 in a project. I want to create submenu only within the object which contains subLinks array. I tried using docs & many tutorials but was unable to achieve this. How could i achieve this?

Template

<v-navigation-drawer app dark class="primary" v-model="drawer">
    <v-list-item>
        <v-list-item-content>
            <v-list-item-title class="title">
                <span class="font-weight-bold">Al-Mehmood</span>
            </v-list-item-title>
            <v-list-item-subtitle>Transport Company</v-list-item-subtitle>
        </v-list-item-content>
    </v-list-item>

    <v-divider></v-divider>

    <v-list dense>
        <v-list-item link v-for="navLink in navLinks" :key="navLink.text" :to="navLink.route">
            <v-list-item-icon>
                <v-icon>{{ navLink.icon }}</v-icon>
            </v-list-item-icon>

            <v-list-item-content>
                <v-list-item-title>
                    {{
                    navLink.text
                    }}
                </v-list-item-title>
            </v-list-item-content>
        </v-list-item>
    </v-list>
</v-navigation-drawer>

Script

data() {
    return {
        drawer: true,

        navLinks: [
            { icon: "dashboard", text: "Dashboard", route: "/" },
            { icon: "star", text: "Ratings", route: "/ratings" },
            {
                icon: "people",
                text: "Drivers",
                route: "/drivers",
                subLinks: [
                    { text: "Add Driver", route: "/drivers/add" },
                    { text: "Add Driver", route: "/drivers/add" }
                ]
            },

            {
                icon: "person_outline",
                text: "Manager",
                route: "/managers",
                subLinks: [
                    { text: "Add Manager", route: "/managers/add" },
                    { text: "Managers", route: "/managers" }
                ]
            },
            { icon: "person", text: "Manage Users", route: "/users" }
        ]
    };
}

Any help would highly be appreciated.

Carol Skelly · Accepted Answer · 2020-06-17 14:13:08Z

1

Use the list-group...

    <v-navigation-drawer app dark class="primary" v-model="drawer">
        <v-list>
            <v-list-item>
                <v-list-item-content>
                    <v-list-item-title class="title">
                        <span class="font-weight-bold">Al-Mehmood</span>
                    </v-list-item-title>
                    <v-list-item-subtitle>Transport Company</v-list-item-subtitle>
                </v-list-item-content>
            </v-list-item>
            <v-divider></v-divider>
            <v-list-group no-action v-for='navLink in navLinks' :key="navLink.text">
                <v-list-item slot='activator' :to="navLink.route">
                    <v-list-item-icon>
                        <v-icon>{{ navLink.icon }}</v-icon>
                    </v-list-item-icon>
                    <v-list-item-title>{{ navLink.text }}</v-list-item-title>
                </v-list-item>
                <v-list-item v-for='sub in navLink.subLinks' :key="sub.text">
                    <v-list-item-title :to="sub.route">{{ sub.text }}</v-list-item-title>
                </v-list-item>
            </v-list-group>
        </v-list>
    </v-navigation-drawer>

Demo: https://codeply.com/p/hZE2TMlslF

edited Jun 17, 2020 at 14:13

answered Jun 17, 2020 at 14:06

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MUHAMMAD Siyab Over a year ago

Your demo is working fine but in my project, when i click themenu item, the item itself disappears.

Andres Foronda · Accepted Answer · 2020-06-20 21:52:07Z

1

this is the solution, a computed property!

computed: {
  filteredNavLinks() {
    return this.navLinks.filter(
      navLink => navLink.subLinks && navLink.subLinks.length
    );
  }
}

Now you v-for must be updated to use filteredNavLinks

<v-list dense>
    <v-list-item link v-for="navLink in filteredNavLinks" :key="navLink.text" :to="navLink.route">
        <v-list-item-icon>
            <v-icon>{{ navLink.icon }}</v-icon>
        </v-list-item-icon>

        <v-list-item-content>
            <v-list-item-title>
                {{
                navLink.text
                }}
            </v-list-item-title>
        </v-list-item-content>
    </v-list-item>
</v-list>

Try and let me know if it works fine.

answered Jun 20, 2020 at 21:52

Andres Foronda

1,4191 gold badge10 silver badges13 bronze badges

Collectives™ on Stack Overflow

Vuetify Lists: Creating Submenus from Array of objects

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related