Skip to content

Same-name shorthand (:type) breaks radio group behavior #13169

@alexchexes

Description

@alexchexes

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNrlVcFuGjEQ/ZWRT0QK0KQ9uSRSU3FoUUOURD1Zqja7XmritS3bS0Fo/71jm12WhiC1x+bCembejJ+fx8OWfDJmtKo5oWTiciuMB8d9ba6ZEpXR1sMWLC+hgdLqChhBLCMfu+ijXixk9iT5Te29Vj/msxY4Gr+MhZ1OZd/cz2fT29crpHhXhalcK+chr63lyn/PZM3hKvAdqFrKsx5EGy9wMX9a8twjZssUAJbm8oKGU4XUC0bOO/dl576M7gaLTcZJIhQHDc8rIzPP0QKYVJlQcYXrQqyu+5wobLeHJJtmMg6oUCimOKSFBHcVAOYz2sZ2BVsDzZfC7oMAq2Gp7RUjg8j+HJ755gyEOpSAkX4KRQxm4O+hfzWsdMElhvrs/8iNch3LppEARuL3MOY3JkRsVgjdj4y7c7YCpfVen1cES63xF6KlhDckXLB2XToZ95oXTec3Miyp1RpffMCWWvlhmVVCbii4TLmh41aU+AoapkKZBCuEwzoIKSVfYxATcTEshE37Usi1rCsVQ4vMULh4ZwIQqyC53b7knHiHD7UUi9HSaYXTKFZH+XRlhOR2nu6AEXxL6WiMZFLqX1+jz1u8sNaf/+T58xH/0q2Dj5E7y/EwK1S2i/nMLjhebghPH275GtddEO+ylog+EbznDs8ZOCbYTa0KpN3DRbZf4twTavHopmvPlWsPFYgGZBPxccx+PnH0Pd33ow8xDxVFFY+P3CPDveClUPzOauMG+1lI4cFbZBdJhE47cMRupBBGaxiI/fEaux3Hair7LViD7a5CwENEn5qfcf+2a4Uyte89ovhlBOiu+8MnmJFRbP2UiGM21sH5mvq9rXrQ8Ed02v+x/F9a/bNEzW/E86KX

Steps to reproduce

  1. Open the linked playground and look at the two components: TogglableButton_OK.vue and TogglableButton_BROKEN.vue.
  2. In TogglableButton_OK.vue, the input's type is bound explicitly using :type="type".
  3. In TogglableButton_BROKEN.vue, the same-name shorthand :type is used instead.
  4. 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 update currentValue 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 and TogglableButton_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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.has workaroundA workaround has been found to avoid the problemscope: compilerscope: v-model

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions