Vue新语法下Vuetify v-list-group activator作作用域插槽时文本消失问题

这个问题我之前也碰到过，核心原因是使用作用域插槽时你完全替换了默认的activator结构，但没有手动复刻包含文本的容器元素。让我给你拆解清楚：

问题根源 #

当你只用<template v-slot:activator>（不带作用域参数）时，你是在给默认的activator结构追加内容，Vuetify会保留原有的标题容器和交互逻辑；但当你使用<template v-slot:activator="{on}">时，你是在完全替换默认的activator组件——这意味着原来承载标题文本的v-list-item-title和外层的v-list-item都被移除了，如果你只绑定v-on="on"但没重建这些结构，文本自然就没地方显示了。

修复方案 #

你需要手动构建完整的activator结构，把文本放在正确的容器里，同时绑定on对象保留展开/收起的交互：

正确的代码示例 #

<v-list-group>
  <!-- 作用域插槽接收on对象，并绑定到v-list-item上 -->
  <template v-slot:activator="{ on }">
    <v-list-item v-on="on">
      <!-- 用v-list-item-title承载你的标题文本 -->
      <v-list-item-title>我的分组标题</v-list-item-title>
    </v-list-item>
  </template>
  
  <!-- 子列表项 -->
  <v-list-item>
    <v-list-item-title>子项1</v-list-item-title>
  </v-list-item>
  <v-list-item>
    <v-list-item-title>子项2</v-list-item-title>
  </v-list-item>
</v-list-group>

为什么这样有效？ #

• v-list-item是activator的基础交互容器，绑定v-on="on"会把Vuetify内置的展开/收起事件监听附加到它上面
• v-list-item-title是Vuetify专门用来显示列表项文本的组件，它会继承列表的样式和布局规则，确保文本正确渲染

对比错误写法（文本消失） #

如果你像下面这样写，文本不在v-list-item内部，也没有用v-list-item-title承载，就会导致文本消失：

<v-list-group>
  <template v-slot:activator="{ on }">
    我的分组标题 <!-- 文本没有放在正确的容器里 -->
    <v-list-item v-on="on"></v-list-item>
  </template>
</v-list-group>

简单来说，用作用域插槽自定义activator时，你需要把默认的activator结构自己写一遍，不能只加个事件绑定就完事～

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