CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvuetify.js
Jasper R.
Jasper R.

Reputation: 405

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

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.

Upvotes: 2

Views: 1489

Answers (1)

Dan
Dan

Reputation: 63099

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

Upvotes: 3

Related Questions