Списки Vuetify: создание подменю из массива объектов - PullRequest
Новая
       5

Списки Vuetify: создание подменю из массива объектов

0 голосов
/ 17 июня 2020

Я использую Vue @ 2.5.17 и Vuetify @ 2.33 в проекте. Я хочу создать подменю только внутри объекта, который содержит массив subLinks. Я пробовал использовать документацию и множество руководств, но не смог. Как я могу этого добиться?

Шаблон 

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

Скрипт 

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" }
        ]
    };
}

Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

1 голос
/ 21 июня 2020

это решение, вычисляемое свойство! 

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

Теперь вам нужно обновить v-for, чтобы использовать filterNavLinks 

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

Попробуйте и дайте мне знать, работает ли оно нормально .

1 голос
/ 17 июня 2020

Используйте 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>

Демо: https://codeply.com/p/hZE2TMlslF

...