defineProps with typescript returns different defaults vs using the props object
Vue version
3.2.47
Link to minimal reproduction
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
When you use defineProps<Type>()
, you should give trueValue
and falseValue
a default value. playground
Hi Chris, good to see you! 😀
Ricardo is right here - the issue is that in the TS example you did not provide default values.
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!