Vuetify中v-list-item-group与v-list-group选中项存储等问题求助

1. 解决selectedTags和selectedCategories未填充的问题 #

• 在组件data中初始化两个数组变量，用于存储选中项：

data() {
  return {
    selectedTags: [],
    selectedCategories: []
  }
}

• 给Tags和Categories对应的v-list-item-group分别绑定v-model，关联到对应变量：

<!-- Tags列表 -->
<v-list-item-group v-model="selectedTags" multiple>
  <!-- 标签项内容 -->
</v-list-item-group>

<!-- Categories列表 -->
<v-list-item-group v-model="selectedCategories" multiple>
  <!-- 分类项内容 -->
</v-list-item-group>

2. 让Categories列表支持多选 #

Categories列表默认是单选模式，需要给它的v-list-item-group添加multiple属性，同时确保每个v-list-item设置value属性（用于标识选中项的唯一值）：

<v-list-item-group v-model="selectedCategories" multiple>
  <v-list-item
    v-for="category in categories"
    :key="category.id"
    :value="category.id"
  >
    <v-list-item-title>{{ category.name }}</v-list-item-title>
  </v-list-item>
</v-list-item-group>

3. 让Tags列表显示父节点 #

将Categories列表中渲染父节点的逻辑同步到Tags列表中：

• 先确认Tags数据源包含父节点数据，确保遍历范围覆盖父层级标签
• 复制Categories的父节点渲染结构到Tags部分，示例如下：

<!-- Tags列表的父节点渲染 -->
<v-list-item
  v-for="parentTag in parentTagList"
  :key="parentTag.id"
  disabled <!-- 若父节点无需选中可添加此属性，否则移除 -->
>
  <v-list-item-title>{{ parentTag.name }}</v-list-item-title>
  <!-- 嵌套子标签列表 -->
  <v-list>
    <v-list-item
      v-for="childTag in parentTag.children"
      :key="childTag.id"
      :value="childTag.id"
    >
      <v-list-item-title>{{ childTag.name }}</v-list-item-title>
    </v-list-item>
  </v-list>
</v-list-item>

如果Tags数据是扁平结构，需要先做数据分组处理，区分父节点和子节点后再渲染。

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