Subscribe on changes!

Vue 3 Component using v-model not returning NULL / Undefined / Object values.

avatar
Feb 10th 2022

Version

3.2.30

Reproduction link

sfc.vuejs.org/

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.

avatar
Feb 10th 2022

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

Demo

avatar
Feb 14th 2022

Thanks for investigating Linus, it works.