Vuetify, как добавить реквизит в v-list-group v-slot: шаблон активатора - PullRequest
Новая
       5

Vuetify, как добавить реквизит в v-list-group v-slot: шаблон активатора

1 голос
/ 06 мая 2020

Я пытаюсь создать похожее меню на пример списков расширения в документации. При этом используются компоненты v-list-group и v-slot: activator. Каждый из дочерних элементов имеет дочерний элемент списка, к которому легко добавить ссылку vue -router. Проблема заключается в том, что когда один из элементов родительского списка (панель инструментов) не имеет дочерних элементов, я буду sh добавить ссылку vue -router :to вместо этого, хотя эти элементы родительского списка используют v- slot: шаблон активатора, и я не уверен, как я могу добавить к нему реквизиты или события.

Я читал об активаторе v-slot здесь github , но не похоже, как я могу этого добиться для чего мне это нужно.

Шаблон 

    <v-list>
        <v-list-group
            v-for="item in items"
            :key="item.name"
            v-model="item.active"
            :prepend-icon="item.icon"
            :append-icon="item.children ? undefined : ''"
            no-action
        >
            //Want this to work with :to or @click
            <template v-slot:activator :to="{name: item.route}">
                <v-list-item-content>
                    <v-list-item-title v-text="item.name"></v-list-item-title>
                </v-list-item-content>
            </template>

            <v-list-item
                v-for="childItem in item.children"
                :key="childItem.name"
                :to="{name:childItem.route}"
            >
                <v-list-item-content>
                    <v-list-item-title v-text="childItem.name"></v-list-item-title>
                </v-list-item-content>
            </v-list-item>
        </v-list-group>
    </v-list>

Данные 

     items: [
                {
                    name: 'Dashboard',
                    route: 'dashboard',
                    active: false,
                    icon: 'mdi-view-dashboard',
                },
                {
                    name: 'Editor',
                    icon: 'mdi-pencil',
                    active: false,
                    children: [
                        {
                            name: 'General',
                            route: 'general',
                        },
                        {
                            name: 'Designs',
                            route: 'designs',

                        },
                        {
                            name: 'Images',
                            route: 'images',
                        },
                    ],
                },
          ];

Обновление

Я взломал вместе обходной путь, добавив v-list-item внутри шаблона, когда родительский элемент содержит ключ маршрута. Затем, используя абсолютное положение, увеличил его размер до родительского шаблона. Я чего-то упускаю ... это лучший способ добиться этого? 

    <template v-slot:activator>
        <v-list-item v-if="item.route" :to="{name: item.route}" class="item-link"></v-list-item>
        <v-list-item-content>
            <v-list-item-title v-text="item.name"></v-list-item-title>
        </v-list-item-content>
    </template>

Стиль 

 .item-link {
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
 }
...