Vuetify <v-list-item-group> <v-list-group> 所选项目未存储

Question

我需要一些建议。我有两个子列表。一个用于标签，另一个用于类别。每个都应该允许多重选择。我想将选定的标签保存到 selectedTags 中，将选定的类别保存到 selectedCategories 中。

问题是 selectedTags 和 selectedCategories 没有被填充。

第二个问题是多选仅适用于标签，其中有一个 v-list-item-group。

我也不明白为什么父节点只显示在-Categories中，而不显示在-Tags中。

请检查代码片段和工作 Codesandbox text 演示。

Answer 1

问题是 selectedTags 和 selectedCategories 没有被填充。

不正确。您只是听到了错误的事件。如果单击两个标签，您会收到一个对象的警报。如果单击三个标签，您会收到包含两个对象的警报。单击事件发生在添加项目之前，但仍在添加。您还可以通过将

selectedTags

和/或

selectedCategories

放入模板中各自的

<div>

中来验证这一点，并查看它们实时更新。

根据 API 文档，您应该在

@change

上使用

v-list-item-group

事件，而不是在

@click

 上使用 

v-list-item

第二个问题是多选仅适用于标签，其中有一个 v-list-item-group。

如果您希望多选与类别一起使用，请使用 v-list-item-group，与标签相同。现在类别正在使用 v-list-group ，这不是同一回事。

我也不明白为什么父节点只显示在-Categories中，而不显示在-Tags中。

同样的问题。这是使用 v-list-item-group（用于创建一组选定项目）和 v-list-group（用于在另一个列表中创建嵌套子组）之间的区别。如果需要，您可以一起使用两者，只需要对代码进行一些重构。