v-model.number not working if using :model-value and @update:model-value

[frederikheld]

Hey everyone,

it is possible to define the v-model of the <input> component as 'number' via v-model.number:

<script setup>
import { ref, watch } from 'vue'

const currentValue = ref(0)

watch(currentValue, () => {
    console.log(currentValue.value, typeof currentValue.value) // `typeof currentValue.value === 'number'`
})
</script>

<template>
  <input
    v-model.number="currentValue"
  />
</template>

I would like to do the same when using :model-value and @update:model-value instead of v-model but I could not find a way to do this. Adding the .number to :model-value did not work.

[...]
    console.log(currentValue.value, typeof currentValue.value) // `typeof currentValue.value === 'string'`
[...]
  <input
    :model-value.number="currentValue"
    @update:model-value="value => currentValue = value"
  />
[...]

Is this possible? If not, how would you approach this?

[dpschen]

Use the looseToNumber function manually.

This is the same function used in the v-model directive.

<template>
  <input
    :model-value.number="currentValue"
    @update:model-value="value => currentValue = looseToNumber(value)"
  />
</template>

<script setup>
import { looseToNumber } from '@vue/shared'
</script>

[frederikheld]

Awesome, thanks a lot! I came up with a very similar approach, but it's better to have it built-in. And I'm happy to see that I landed close to the canonical approach :-D