@vue/compat input type=radio value=false via Boolean not in DOM

[estberg]

Vue version

3.4.38

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-7cf2eb?file=src%2Fcomponents%2FRadioButton.vue

Steps to reproduce

1. Run the dev server
2. In dev tools, see that the input does not have any value attribute

What is expected?

value="false" should be on the input

What is actually happening?

Value seems to be dropped somewhere

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    vue: 3.4.38 => 3.4.38

Any additional comments?

Note: it is not recommended that Boolean type is used as the value for a radio input and it should probably just be a String. However this is something that Vue should handled for us and without compat it does show up (see SFC playground).

[Obinna-Nwankwo]

//Check well if this issue is in the latest Vue version//
//add any release candidates or beta versions//

const selectedValue = ref(false)

watch(selectedValue, (newValue) => {
console.log('Selected value changed:', newValue)
})

[edison1105]

see https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html

[Obinna-Nwankwo]

Thanks for the tip!

…

On Fri, 30 Aug 2024 at 03:21, edison ***@***.***> wrote: Note: The current behavior is inconsistent with vue2, so it should be a bug. — Reply to this email directly, view it on GitHub <#11747 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BDII7FVHHE3IJXSRZZM7CV3ZT7JLNAVCNFSM6AAAAABNKUMM4KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMJZG4YDINZYGQ> . You are receiving this because you commented.Message ID: ***@***.***>