Vuetify v-btn-toggle 组的 v-model 错误

【问题标题】：Vuetify v-btn-toggle group has wrong v-modelVuetify v-btn-toggle 组的 v-model 错误
【发布时间】：2021-05-02 17:54:44
【问题描述】：

我有两个 v-btn-toggles，里面有几个按钮。选择第一个会更改第二个中可用的按钮，模式如下：

firstButtons: [ "a", "b", "c" ],
secondButtons: { a: [0,1,2], b: [3,4], c: [5] }

v-btn-toggles 是强制性的。如果我们点击“C”，则在第二组中选择“5”。如果我们点击“A”，我们可能期望选择“0”，但选择“2”。如果我们随机点击第一组，第二组选择的按钮变化很大。

我有什么遗漏吗？如果我正在尝试制作这种数据模式，我该如何完成？

Here's 说明此行为的代码笔。

【问题讨论】：

【解决方案1】：

这似乎是 <v-btn-toggle> 从其子元素设置其 v-model 的方式以及与 Vue 键交互方式的结果。

当您将topSelection 从 A 更改为 B 时，您会看到 bottomSelection 短暂地更改为 3，这是不应该发生的。

要解决此问题，请将第二个循环中的 key 绑定设置为 v-for 索引：

<v-btn v-for="(button, index) in buttons[topSelection].buttons" :key="index">

【讨论】：