Subscribe on changes!

defineProps with typescript returns different defaults vs using the props object

avatar
Mar 9th 2023

Vue version

3.2.47

Link to minimal reproduction

https://sfc.vuejs.org/#eNrtVktv2kAQ/isrH8BIYEs9GkKVVjm0h7RSqlxCDsYewKm9a+2u8xDlv3f2ZXsNoVJbqVJUpITdee3szDffsg8u6zp6bCBIgoWEqi5TCcsVJfhZyHRdAlkzngO3MiXt1mqXL29TXqRULmJc+5pPtG5OyW/TsgFPjptzR+SwKSh85awW4ajMmvV8xNX/yYngi487yL6v2TN5nFUsh/JiFVDGq7RcBfHSOEjfZb83BofDbyY1KuW8n9doK+fhMLlX0vz2UoPIeFHLXsKyFZ5JmnRW5PXUcan6iDtcdR3GrXUtU7pVR4pVgPKiqhmXZE84bMiBbDiryCpAhKyCeattS2zVUewkCkunLHu3PPLpdK23qhY86whY5rQpMSMlpWkFCTp3PVZQwsynSpsxPJQClSIx5qQ9X+u7bXekkh+0VoBs6oSEE3KxdO4Zo0ISgw5yoWoSbtJSwETn6PS9Ppyw4RiXU6yoCTP12uaOP6DxIjbSZTANTPlmVVpHD4JRHE+d0coq8MbtFW13VFl2UtYiiWOxyVQpH0TE+DbGVcQbKosKIhDVbM3ZkwCOgW3dbIwYhY/AZxwoTjzwczEHpkdx9b3wWniVPjQUzdir63IPwEdICz/Vy0ZCPlUAcHPmNldVIXHzlMpsd7XZQIaVNLga4yHjFTV9qZUPtqRPH7ZospAlIulG8oJubRH08GluSsidm6QPjJWQUmtCfA9CrptqDbzdXnKevpBUWBTp7UJoF/KDUG28tNb39ltDGE+0kV3Ic7GWzlfyBmzG9mIoQ3hhOJe4y9jGdZ7EDVaig1ipmQRCNID/OLCOMoicKTRAngwKW6DEK62ZdE/EWUOPHPNCKHo7DojAlMCrgiLf+crDRNGfgQggklqEaFiFd+OmzpVTh4fxfc/FIVNr0NftHbS2ILFjbdVaAtBojLqglh5cYXAeQg0Fz1flF55IaGpg4zhGU4jZqL/eYIRHfIaFiEq2DT/ffLmODJ6KzUuo05siRkukqHcTvLCpVMtK+s3wfiMsCvXA9x623gvmVcnwgf0oGCkDSwueLlFtVw82fvkK12dUuqVv4DUcrby9b6oAP9P1U9TjRsi30dhtjbp58K2cXn/7Kgt0d9NBulmZCoG6XZHnQD1VbGorSib12nu4e3zqP5v/nFkXFmKqde8TYoDVYziUrc0QIhMOKBEX4UA0ubvHNQ68PiEfMvTfiNZ2/lywIR/+2ta2uzP0iWoo93DaVx6W4Zsmqv809YZp6vATrh2k8w==

Steps to reproduce

Check on and off both checkbox variants. You can see that the normal checkbox results in the value changing reactively. The one with typescript props will not

What is expected?

That no matter what variant of defineProps I use, both will result in exactly the same props

What is actually happening?

The value prop in this case on the typescript variant results in a false value while I expect it to be undefined. I think its related to how v-model is transpiled and how it interacts with the value prop? Not sure though

System Info

No response

Any additional comments?

No response

avatar
Mar 9th 2023

When you use defineProps<Type>(), you should give trueValue and falseValue a default value. playground

avatar
Mar 9th 2023

Hi Chris, good to see you! 😀

Ricardo is right here - the issue is that in the TS example you did not provide default values.

avatar
Mar 10th 2023

Hey @LinusBorg long time not seen indeed. Likewise! And thanks @RicardoErii . I think I understand now. Besides this mistake, I've also been using the value prop eg: <Checkbox value="Give this" v-model="computedValue" />. I was expecting it to give me "Give this" when checked and undefined when unchecked.

In the Vue docs however it does show this example using an array. This is what confused me. Should it work like above? Also why does it work for an array, but not for a string value?

https://vuejs.org/guide/essentials/forms.html#checkbox

<div>Checked names: {{ checkedNames }}</div>

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>

Thanks for the fast reply!