Vue 3 Component using v-model not returning NULL / Undefined / Object values.
Version
3.2.30
Reproduction link
Steps to reproduce
Select the Option: Null Value from the first select. The value type should be null but you get a string containing the option innerHtmlText. Repeat the same step for the second select. The value type is null which is the expected behaviour.
This also affects value types undefined and object literals.
What is expected?
The value type of the first select should be null.
What is actually happening?
The value type of the first select is a string containing the option innerHtmlText.
Repeat the same step for the second select. The value type is null which is the expected behaviour. This also affects types undefined and object literals.
You are using v-model on the component, but not on the native select inside that component.
You emit $event.target.value
which will always be a string.
if you want the select to handle non-string values, you need to use v-model on the select.
You can do so By using a computed with a getter and setter to have a ref to pass to the select's v-model