CODEWITHSUNDEEP
vue.js
John Moore
John Moore

Reputation: 7129

Validating input with vue.js - what does v-model.number really mean?

If I have specified that my input field is numeric, with v-model.number, what assumptions can I make for validating the numeric input prior to form submission (or rather, posting JSON to the server)? I.e., can I assume that it is always going to be a number at this point, and can therefore concentrate on testing whether it falls within a certain range, say? Or do I still need to test isNan, etc?

Upvotes: 12

Views: 14202

Answers (1)

Bengt
Bengt

Reputation: 4038

I checked with the source. Suffixing with .number causes the input value (which is a string even for type="number") to be parsed through the following function:

/**
 * Convert a input value to a number for persistence.
 * If the conversion fails, return original string.
 */
export function toNumber (val: string): number | string {
  const n = parseFloat(val)
  return isNaN(n) ? val : n
}

This means that you must not assume that the result is always a number, but you can assume that it's never NaN. However this is not explicitly stated in the official docs and thus might be subject to change. I would suggest going with type="number" if possible and otherwise validate as you would usually do.

Upvotes: 12

Related Questions