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

Question

我有两个带有几个按钮的 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 说明这种行为的代码笔。

Answer 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">