如何让Vue3+Vuetify3的v-navigation-drawer子菜单默认展开？

要实现子菜单在页面加载时自动展开，你需要通过v-model控制v-list-group的展开状态，并在初始化时将需要展开的菜单项加入绑定集合。同时调整子菜单的结构以符合Vuetify组件规范。

修改后的完整代码： #

<template>
  <v-navigation-drawer v-model="drawer" width="325">
    <v-list :lines="false" density="compact" nav>
      <!-- 用v-model绑定expandedGroups控制展开状态 -->
      <v-list-group 
        v-for="(item, i) in items" 
        :key="i" 
        :value="item" 
        v-model="expandedGroups"
      >
        <template v-slot:activator="{ props }">
          <v-list-item 
            v-bind="props" 
            :prepend-icon="item.icon" 
            :title="item.text" 
            active-color="orange-darken-1"
            rounded="xl"
          ></v-list-item>
        </template>
        <!-- 直接渲染子菜单项，移除不必要的v-list-item-title -->
        <v-list-item 
          v-for="itemdetail in item.subItem" 
          :key="itemdetail.text" 
          :prepend-icon="itemdetail.icon" 
          :title="itemdetail.text"
          active-color="teal-darken-1" 
          rounded="xl"
        >
        </v-list-item>
      </v-list-group>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  data: () => {
    // 先定义菜单数据，方便初始化展开集合
    const items = [{
      text: 'Parent Menu',
      icon: 'mdi-pier-crane',
      subItem: [{
          text: 'Child Menu 1',
          icon: 'mdi-engine'
        },
        {
          text: 'Child Menu 2',
          icon: 'mdi-calculator-variant'
        },
        {
          text: 'Child Menu 3',
          icon: 'mdi-list-status'
        },
        {
          text: 'Child Menu 4',
          icon: 'mdi-calendar-edit'
        },
      ]
    }];
    
    return {
      drawer: true,
      // 初始化时将需要展开的父菜单项加入集合
      expandedGroups: [items[0]],
      items
    };
  },
}
</script>

关键修改说明： #

• 控制展开状态：给v-list-group添加v-model="expandedGroups"，并在data中初始化expandedGroups数组，包含需要默认展开的父菜单项，页面加载时对应分组会自动展开。
• 修复子菜单结构：移除包裹子菜单项的v-list-item-title，直接在v-list-group下渲染v-list-item，符合Vuetify组件嵌套规范，避免布局异常。
• 优化子项key：将子菜单项的key改为itemdetail.text（原数据无id属性），确保key的唯一性。

若需多个父菜单默认展开，只需将对应菜单项全部加入expandedGroups数组即可。

内容的提问来源于stack exchange，提问作者mtDeveloper