Vuetify 3中v-list-item使用to属性时出现折叠问题求助

原因分析 #

在Vuetify 3中，当给v-list-item添加to属性时，组件会自动转换为路由导航链接（基于Vue Router），此时它的默认渲染结构和样式优先级会发生变化：

• 不带to的v-list-item是纯列表项，title属性会直接渲染为符合列表高度的文本容器；
• 带to的v-list-item会被包装成链接组件，仅通过title属性设置文本时，无法触发列表项的完整高度样式，导致视觉上出现“折叠”的紧凑显示效果。

解决办法 #

调整v-list-item的结构，显式使用v-list-item-title组件包裹标题文本即可解决样式不一致的问题：

修改后的代码：

<v-navigation-drawer v-model="drawer">
  <v-list>
    <v-list-item v-for="(item, i) in items" :key="i" :to="item.value">
      <v-list-item-title>{{ item.title }}</v-list-item-title>
    </v-list-item>
  </v-list>
</v-navigation-drawer>

这样无论是否添加to属性，列表项都会保持一致的高度和布局样式。

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