Selects with more than 4 explictly typed options always return string values in v-model.

[baubie]

Vue version

3.2.38

Link to minimal reproduction

sfc.vuejs.org

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

[LinusBorg]

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)

[edison1105]

as a workaround:
add a key to the option to avoid hoists.

<select v-model="foo">
    <option :key="1" :value="1">One</option>
    ...
</select>