Selects with more than 4 explictly typed options always return string values in v-model.
Vue version
3.2.38
Link to minimal reproduction
Steps to reproduce
I have a simple <select v-model="foo"> setup with 5 options and the values all set to numbers. When there are 4 options, the variable is set to a number type as expected. When there are 5 or more options, the variable is set to a string!
See the example link as a demo with two identical selects other than the number of options.
If you instead define an array and use v-for to create your options, this bug does not appear and you can have 100 options and the value is always a number.
What is expected?
The v-model variable should always be a number and the number of options set shouldn't matter.
What is actually happening?
As soon as more than 4 explicit option tags are present you get a string as the value.
System Info
No response
Any additional comments?
No response
1
A compiler optimization hoists these elements as one static HTML string, which removes the runtime type information that was present in the binding.
const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<option value=\"1\">One</option><option value=\"2\">Two</option><option value=\"3\">Three</option><option value=\"4\">Four</option><option value=\"5\">Five</option>", 5)
as a workaround: add a key to the option to avoid hoists.
<select v-model="foo">
<option :key="1" :value="1">One</option>
...
</select>