Vuetify 抽屉列表项活动类

Question

** 当我单击 v-list-item 标题和图标时，仅将页面导航到相应页面。当我点击向下箭头时，它只是打开列表而不是导航到相应的页面。你能解释一下吗？ **

     <!-- list-items -->
     <v-list-group
         v-for="item in items"
         :key="item.title"
       v-model="item.active"
       active-class="activelistgroup"
       no-action
     >
       <template v-slot:activator >
         <v-list-item :to="item.link" >
           <v-list-item-icon>
             <v-icon v-text="item.action"></v-icon>
           </v-list-item-icon>
           <v-list-item-content >
             <v-list-item-title v-text="item.title"></v-list-item-title>
           </v-list-item-content>
         </v-list-item>
       </template>

       <v-list-item v-for="child in item.items" :key="child.title">
         <!-- :to="child.link" -->
         <v-list-item-content>
           <v-list-item-title
             class="subtitle"
             v-text="child.title"
           ></v-list-item-title>
         </v-list-item-content>
       </v-list-item>
     </v-list-group>
   </v-list>
 .activelistgroup {
background-color: $appbar-color;

}
.drawer {
background-color: $drawer-color;
width: 300;
}

.v-list--dense .v-list-group--active .v-list-item .v-list-item__title {
color: $font-active;

}
.v-list--dense .v-list-group--active .v-list-item .v-list-item__icon {
color: $font-active;
}
.v-list--dense .v-list-group--active .v-list-item .subtitle {
color: black;
}
.support {
margin-left: 50px;
}
.v-list-item--active a{
padding: 0px;//need to change active class of a
background-color: $appbar-color;
}

Answer 1

试试这个：

<template v-slot:activator>
    <v-list-item :to="item.link">
        <v-list-item-action>
            <v-btn icon :to="item.link">
                <v-icon v-text="item.action"></v-icon>
            </v-btn>
        </v-list-item-action>
        <v-list-item-content>
            <v-list-item-title v-text="item.title"></v-list-item-title>
        </v-list-item-content>
    </v-list-item>
</template>