如何通过代码控制展开Vue 2中的v-list-group组件？

当然可以通过方法控制v-list-group的展开状态，Vuetify的v-list-group组件支持通过绑定open属性或v-model来手动控制展开/收起状态。下面是具体实现思路和代码示例：

核心实现步骤 #

• 给每个v-list-group绑定独立的展开状态变量，比如用对象存储各组的展开状态（键为组的唯一标识，如id）。
• 触发搜索时，遍历所有菜单项，判断哪些组包含匹配的子项，将对应组的展开状态设为true，不匹配的可设为false（按需选择）。

代码示例 #

假设你的菜单数据结构如下：

data() {
  return {
    searchText: '',
    menuGroups: [
      {
        id: 1,
        title: '系统管理',
        items: ['用户管理', '角色配置', '权限设置']
      },
      {
        id: 2,
        title: '内容管理',
        items: ['文章发布', '分类管理', '评论审核']
      }
    ],
    openGroups: {} // 存储每个组的展开状态，键为组id
  }
}

模板部分 #

<template>
  <div>
    <!-- 搜索框 -->
    <v-text-field
      v-model="searchText"
      label="搜索菜单"
      @input="handleSearch"
    ></v-text-field>

    <!-- 侧边栏菜单 -->
    <v-list>
      <v-list-group
        v-for="group in menuGroups"
        :key="group.id"
        :open="openGroups[group.id]"
      >
        <template v-slot:activator>
          <v-list-item-title>{{ group.title }}</v-list-item-title>
        </template>

        <!-- 筛选后的子菜单项 -->
        <v-list-item
          v-for="item in filterItems(group.items)"
          :key="item"
        >
          <v-list-item-title>{{ item }}</v-list-item-title>
        </v-list-item>
      </v-list-group>
    </v-list>
  </div>
</template>

方法部分 #

methods: {
  filterItems(items) {
    if (!this.searchText) return items
    return items.filter(item => 
      item.toLowerCase().includes(this.searchText.toLowerCase())
    )
  },
  handleSearch() {
    // 初始化所有组为收起状态（可选，按需保留）
    this.menuGroups.forEach(group => {
      this.$set(this.openGroups, group.id, false)
    })

    // 找到包含匹配子项的组，设置为展开
    this.menuGroups.forEach(group => {
      const hasMatch = this.filterItems(group.items).length > 0
      if (hasMatch) {
        this.$set(this.openGroups, group.id, true)
      }
    })
  }
}

关键说明 #

• 使用$set是因为Vue2无法检测对象新增属性的变化，确保展开状态的变更能被Vue响应。
• 如果不需要收起不匹配的组，可以去掉初始化状态的代码块，只将匹配的组设为展开。
• 也可以直接用v-model绑定open属性，写法为v-model="openGroups[group.id]"，效果和绑定open属性一致。

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