javascript - Vuetify v-btn-toggle group has wrong v-model

Question

I've got two v-btn-toggles with several buttons in them. Selecting the first changes the buttons available in the second, in a pattern like this:

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

The v-btn-toggles are mandatory. If we click on "C", "5" is selected in the second group. If we click then on "A", we might expect "0" to be selected, but instead "2" is. And if we click randomly on the first group, the button selected in the second varies wildly.

Is there something I'm missing? If I'm trying to make this kind of data pattern, how can I accomplish it?

Here's a codepen illustrating this behavior.

question from:https://stackoverflow.com/questions/65943858/vuetify-v-btn-toggle-group-has-wrong-v-model

Answer 1

This seems to be a result of the way <v-btn-toggle> sets its v-model from its child elements and the way that interacts with Vue keys.

When you change topSelection from A to B, you can see bottomSelection briefly changes to 3, which shouldn't happen.

To fix this, set the key binding in the 2nd loop to the v-for index:

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