v-model Modifiers

Shelf's form adds a book with 320 pages, and the "pages left" total becomes '32010'. Someone else saves a title as " Dune " with stray spaces, and the search cannot find it. Both bugs come from raw input text. Three small modifiers on v-model fix them at the source.

The rule

.number converts, .trim cleans, .lazy waits.

• .number passes the typed text through parseFloat, so '320' becomes the number 320. If the text cannot be parsed, such as 'abc', the original string is kept, so still validate. An input with type="number" gets this conversion automatically.
• .trim removes whitespace from both ends: " Dune " is stored as "Dune".
• .lazy changes when the ref updates. Normally v-model syncs on every input event, every keystroke. With .lazy it syncs on the change event, which for a text box fires when the user leaves the field (or presses Enter in a single-line input). Good for fields that trigger expensive work, like validation that calls a server.

Modifiers combine: v-model.lazy.trim="title" waits until the user leaves, then stores the trimmed text.

Why the '32010' bug happened: in JavaScript, + with a string joins text. '320' + 10 is '32010', while 320 + 10 is 330. Converting at the input means every later calculation gets a real number.

The shortcut

For each field, ask three quick questions: "Is it a number? Could spaces sneak in? Must it update every keystroke?" Yes to the first → .number. Yes to the second → .trim. No to the third → .lazy.

A trap with .number: it does not guarantee a number. A user who types letters leaves a string in the ref. Check with typeof or Number.isFinite before trusting it.

Drills

Answer fast — trust the rule.

Remember

• .number parses to a number, .trim removes outer spaces, .lazy updates on change instead of input.
• Shortcut: ask "number? spaces? every keystroke?" for each field.
• Trap: .number keeps unparseable text as a string, so still validate.