1---
2title: v-model.number Uses parseFloat Not valueAsNumber
3impact: MEDIUM
4impactDescription: .number modifier returns empty string for empty input and uses parseFloat, not native valueAsNumber
5type: capability
6tags: [vue3, v-model, forms, input, number, type-coercion, modifiers]
7---
8 
9# v-model.number Uses parseFloat Not valueAsNumber
10 
11**Impact: MEDIUM** - The `.number` modifier doesn't behave like the native `valueAsNumber` property. It returns an empty string (not NaN) for empty inputs, and uses `parseFloat()` which has different parsing rules. This can cause unexpected type issues in calculations and validations.
12 
13Understanding these differences is crucial when working with numeric forms, especially for calculations, min/max validation, or when interfacing with APIs that expect strict number types.
14 
15## Task Checklist
16 
17- [ ] Expect empty string (not 0 or NaN) when input is cleared with `.number` modifier
18- [ ] Handle the empty string case in your validation and calculations
19- [ ] Remember `.number` uses parseFloat - "123abc" becomes 123, not NaN
20- [ ] For strict numeric parsing, add custom validation
21 
22**Key Differences:**
23 
24| Scenario | `.number` modifier | Native `valueAsNumber` |
25|----------|-------------------|----------------------|
26| Empty input | `''` (empty string) | `NaN` |
27| `"123"` | `123` | `123` |
28| `"123.45"` | `123.45` | `123.45` |
29| `"123abc"` | `123` | `NaN` |
30| `"abc"` | `'abc'` (original string) | `NaN` |
31 
32**Problem - Unexpected types:**
33```html
34<script setup>
35import { ref, computed } from 'vue'
36 
37const price = ref(0)
38const quantity = ref(1)
39 
40const total = computed(() => {
41  // PROBLEM: price might be '' (empty string) when input is cleared
42  return price.value * quantity.value  // '' * 1 = 0, but typeof is still number
43})
44 
45function validatePrice() {
46  // PROBLEM: This check fails when input is empty
47  if (typeof price.value !== 'number') {
48    // Never enters here! '' is still treated as "processed"
49  }
50 
51  // PROBLEM: parseFloat("$100") returns NaN, but "100abc" returns 100
52}
53</script>
54 
55<template>
56  <input v-model.number="price" type="number">
57  <!-- When user clears input, price.value becomes '' not 0 or NaN -->
58</template>
59```
60 
61**Solution - Handle empty string explicitly:**
62```html
63<script setup>
64import { ref, computed } from 'vue'
65 
66const price = ref(0)
67const quantity = ref(1)
68 
69const total = computed(() => {
70  // CORRECT: Handle empty string case
71  const priceNum = price.value === '' ? 0 : price.value
72  return priceNum * quantity.value
73})
74 
75// Or use a wrapper computed for safer access
76const safePrice = computed(() => {
77  if (price.value === '' || price.value === null) return 0
78  return Number(price.value) || 0
79})
80</script>
81 
82<template>
83  <input v-model.number="price" type="number" min="0">
84  <p>Total: ${{ total.toFixed(2) }}</p>
85</template>
86```
87 
88**Solution - Custom input handling for strict parsing:**
89```html
90<script setup>
91import { ref } from 'vue'
92 
93const price = ref(0)
94 
95function handlePriceInput(event) {
96  const value = event.target.value
97 
98  // Strict parsing - only accept valid numbers
99  const parsed = parseFloat(value)
100 
101  if (value === '') {
102    price.value = 0  // Or null, depending on your needs
103  } else if (!isNaN(parsed) && isFinite(parsed)) {
104    // Additional check: ensure entire string is numeric
105    if (/^-?\d*\.?\d+$/.test(value.trim())) {
106      price.value = parsed
107    }
108  }
109  // Invalid input - keep previous value
110}
111</script>
112 
113<template>
114  <!-- Manual binding for strict numeric control -->
115  <input
116    :value="price"
117    @input="handlePriceInput"
118    type="number"
119  >
120</template>
121```
122 
123## Reference
124- [Vue.js Form Input Bindings - .number](https://vuejs.org/guide/essentials/forms.html#number)
125