Vue中实现v-list-group鼠标悬停展开子项的技术问题

核心是把列表组的展开状态和hover变量绑定，替换默认的点击触发逻辑：

1. 给v-list-group加v-model="subItem.isHovered"，用hover状态直接控制展开/收起
2. 移除activator里的v-bind="props"（它自带点击触发的逻辑），如果要保留默认样式，只绑定props.attrs
3. 确保subItem.isHovered是响应式的（如果数据来自外部，初始化时要给每个子项加上该属性）

修改后的完整代码：

<v-list>
    <div v-for="subItem in item.content" :key="subItem.title">
        <v-list-group 
            v-if="subItem.content"
            v-model="subItem.isHovered" <!-- 绑定hover状态到展开控制 -->
        >
            <template v-slot:activator="{ props }">
                <v-list-item 
                    link 
                    v-bind="props.attrs" <!-- 仅绑定样式属性，去掉点击事件 -->
                    :title="subItem.title" 
                    class="sub-menu" 
                    height="40"
                    @mouseenter="subItem.isHovered = true"
                    @mouseleave="subItem.isHovered = false"
                ></v-list-item>
            </template>

            <v-list-item 
                link 
                v-for="childSubItem in subItem.content"
                :key="childSubItem.title"
                :to="childSubItem.href"
            >
                <v-list-item-title>{{ childSubItem.title }}</v-list-item-title>
            </v-list-item>
        </v-list-group>
        <v-list-item v-else link :to="subItem.href">
            <v-list-item-title>{{ subItem.title }}</v-list-item-title>
        </v-list-item>
    </div>
</v-list>

额外提示：如果item.content是异步获取的，要在数据加载后给每个子项添加响应式的isHovered：

// 数据加载完成后处理
this.item.content.forEach(subItem => {
  this.$set(subItem, 'isHovered', false)
})

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