Description
Vue version
3.5.13
Link to minimal reproduction
Steps to reproduce
- Open the linked playground and look at the two components:
TogglableButton_OK.vue
andTogglableButton_BROKEN.vue
. - In
TogglableButton_OK.vue
, the input'stype
is bound explicitly using:type="type"
. - In
TogglableButton_BROKEN.vue
, the same-name shorthand:type
is used instead. - Try switching radios (click
⊚ label1
then⊚ label2
) in the first section (named "OK"). Then, either reload the page or not, and try switching radios in the second section (named "BROKEN").
What is expected?
- When you click the
label1
radio button, it should be checked and updatecurrentValue
to 'value1'. - When you click the second radio button, it should check the second and uncheck the first, updating
currentValue
to 'value2'. - The behavior should be the same for both components:
TogglableButton_OK.vue
andTogglableButton_BROKEN.vue
What is actually happening?
With the same-name shorthand :type
attribute binding:
- Clicking the first radio button checks it visually, but
currentValue
remains null. - After clicking the second radio button, both buttons appear checked - even though they're in the same radio group.
System Info
System:
OS: Windows 11 10.0.26100
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
Memory: 25.89 GB / 63.67 GB
Binaries:
Node: 22.11.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
pnpm: 9.12.3 - ~\AppData\Roaming\npm\pnpm.CMD
Browsers:
Edge: Chromium (130.0.2849.80)
npmPackages:
vue: ^3.5.13 => 3.5.13
Any additional comments?
In the linked Vue SFC Playground Reproduction, compare TogglableButton_OK.vue
with TogglableButton_BROKEN.vue
. The only difference is in how the :type
attribute is bound.