v-model.number does not work for radio buttons

[screendriver]

Vue version

3.4.25

Link to minimal reproduction

https://play.vuejs.org/#eNqVkk1LAzEQhv9KyKUKdZeqp7ItqPSgBxX1mMu6nW1T80U+amXZ/+5MamsPsuAlZN73yfDOkI7fOFdsE/Apr0LjpYssQExuLozUzvrIOuahZT1rvdVshOhIGGEaa0JkEfCYEXB2LkxV7jvgWywiaKfqCFgxVq0n867b833P6PrlwLYHpSoRyKA0LmFjdGeC+3opreBsW6tE9YTuF9ouQRUm6XfwKFIL1E2tCfmpSgoRh7td/qtbVZ5MxMc8BtxBK1fFJliD6+sovuCN1U4q8E8uStyR4FOWHfJqpeznQ9aiTzA+6M0amo8/9E3YkSb4s4cAfguCH71Y+xVgNrIXr4+ww/vRxJmSQnrAfIFgVaKMe+w2mSXGPuFy2vv8CaRZvYXFLoIJh6EoKJF95gXHj3E3MPpv3KviOr8Tpuf9N4sK1cE=

Steps to reproduce

• declare radio buttons with values that can be parsed as number
• add a ref() and bind the radio buttons with v-model.number to it

What is expected?

The value of the ref should be of type number.

What is actually happening?

It is always of type string (tested in Chrome and Firefox.)

System Info

No response

Any additional comments?

No response

[skirtles-code]

I believe the trim modifier has the same problem. Modifiers also seem to be ignored for type="checkbox".

It seems relatively easy to work around this problem. I wonder whether it's worth the extra bytes to support it. That said, if it isn't supported that should probably be documented somewhere.

[YiMo1]

I believe the trim modifier has the same problem. Modifiers also seem to be ignored for type="checkbox".

It seems relatively easy to work around this problem. I wonder whether it's worth the extra bytes to support it. That said, if it isn't supported that should probably be documented somewhere.

Yes, in the source code of thev-model, there is no modifier judgment made for buttons of types checkbox and radio. If Vue's official intention is to do so, then I think it should be explained in the document.

[neneodonkor]

From the docs it says: .number cast valid input string to numbers.

I think it means strings that are being typed into an input or text box. With the radio button you are not inputing any text. You are just changing the state of the radio button from checked to unchecked. And you have an attribute with the name value, which will always be in string. The value attribute is just a way to identify or describe the state of the radio button depending on the context. So, if I want to use on and off, or true and false, these are just descriptive values.

Perhaps, a workaround is to bind the value attribute to a constant variable of number type.
:value="num1" where const num1 = 1.

Or an object can be used in this case:

const radio = {
   num1: 1,
   num2: 2
}

[YiMo1]

我认为 @neneodonkor 说的很对，所以，我觉得这个问题严格来说不算是一个问题，如果想对radio元素使用.number，那为什么不直接使用:value="number"呢？

所以我认为正因如此，Vue官方才只对input元素做了这些修饰符

[neneodonkor]

@YiMo1 感謝