Vuetify 如何将道具添加到 v-list-group v-slot:activator 模板答案

【问题标题】：Vuetify how to add props to v-list-group v-slot:activator templateVuetify 如何将道具添加到 v-list-group v-slot:activator 模板
【发布时间】：2020-05-06 20:33:37
【问题描述】：

我正在尝试制作与文档中的expansion lists 示例类似的菜单。这使用 v-list-group 和 v-slot:activator 组件。每个子元素都有一个子列表项，很容易添加一个 vue-router 链接。问题是当父列表项（仪表板）之一没有子项时，我希望添加一个 vue-router :to 链接而不是这个，尽管这些父列表项使用 v-slot:activator 模板和我不确定如何在其中添加道具或事件。

我在github 阅读了有关 v-slot 激活器的信息，但它似乎并没有提到我如何能够实现我需要它做的事情。

模板

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

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

我不知道您是否还在寻找答案，但是，我遇到了同样的问题，并找到了使用 slot 属性的解决方法。（不是模板中的 V-SLOT）- 删除模板，在这里检查一下：

<v-list-group v-for="(parentCat, parent_id) in item.parent_cat" :key="`${parent_id}parentCat`" :value="openParent==parent_id" append-icon="" active-class="tagActiveIcon" @click="parentCatChanged(parent_id)" :disabled="true">
    <div slot="activator" class="d-flex justify-space-between maximizeWidth" @click="parentCatChanged(parent_id)">
        <div>Par_{{ parentCat.title}}</div>
        <div><v-icon color="primary">mdi-eye</v-icon></div>
    </div>
...

【讨论】：