时间戳

首页 > 解决方案 > Vuetify v-btn-toggle 组的 v-model 错误

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

问题描述

我有两个 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”。如果我们随机点击第一组，第二组中选择的按钮变化很大。

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

这是一个说明此行为的代码笔。

标签： javascriptvue.jsvuejs2vue-componentvuetify.js

解决方案

这似乎是从其子元素<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">

推荐阅读