如何以编程方式扩展 v-list-group？

Question

我目前正在开发一个具有侧边栏菜单的 Vue 2 应用程序，我正在使用v-list-group显示菜单项，您可以使用搜索字段对其进行过滤。

我正在尝试展开过滤后的菜单项以显示搜索结果，但我不知道如何将v-list-group项设置为在我进行搜索后展开。

有没有办法通过一种方法将项目设置为“打开”或“活动”state？

Answer 1

使用v-model指令绑定组的活动值。

该值应对应于从零开始的索引。

第一组为0，第二组为1，第三组为2。

下面的示例有点矫枉过正，但应该可以说明这一点。

模板：

<v-list-group :key="category.title" no-action v-model="category.active">
  // ...
</v-list-group>

数据：

  data: () => ({
    categories: [
      {
        title: 'Category 1',
        active: false,
        items: [
          {
            title: 'Sub Category 1',
            subactive: false,            
          }
        ]
      },
      {
        title: 'Category 2',
        active: false,
        items: [
          {
            title: 'Sub Category 2',
            subactive: false,            
          }
        ]
      },
      {
        title: 'Category 3',
        active: false,
        items: [
          {
            title: 'Sub Category 3',
            subactive: false,            
          }
        ]
      }
    ],
  }),

文档： https://vuejs.org/api/built-in-directives.html#v-model

示例： https://codepen.io/alexpetergill/pen/BaPOJYp/dcca9f48d8d3daf072688954e50ea17f