Vuetify 2升级至3：替换已移除的v-list-item-content/v-list-item-group

以下是针对你代码中v-list-item-content和v-list-item-group弃用问题的直接修复代码，以及对应的改动说明：

修复后的完整代码 #

<v-navigation-drawer :rail="mini" permanent clipped app width="200">
  <v-list density="compact" v-model:selected="selected">
    <v-list-item
      v-for="item in items"
      :key="item.title"
      link
      :disabled="item.disabled"
      :icon="item.icon || null"
      :value="item.title"
    >
      <v-list-item-title>{{ item.title }}</v-list-item-title>
    </v-list-item>
  </v-list>
</v-navigation-drawer>

具体改动说明 #

关于v-list-item-group的替换 #

• 移除原有的<v-list-item-group>标签，将原绑定在它身上的v-model="selected"转移到外层<v-list>，并改为Vuetify3要求的v-model:selected="selected"语法
• 给每个<v-list-item>添加:value="item.title"（这里用item的title作为选中标识，你也可以换成item的id等唯一值，只要和selected变量的类型匹配即可），这样列表就能识别选中项并同步到selected变量中

关于v-list-item-content的替换 #

• 直接删除<v-list-item-content>容器标签，把里面的<v-list-item-title>直接放到<v-list-item>内部即可
• Vuetify3的<v-list-item>内部已经通过CSS Grid实现了自动布局，无需额外容器就能保证标题、图标这些元素的正确排版位置

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