[{"data":1,"prerenderedAt":549},["ShallowReactive",2],{"content-\u002Fdocs\u002Fbinding-inputs\u002Fmodifiers":3},{"id":4,"title":5,"body":6,"description":528,"extension":529,"meta":530,"metaRows":531,"navigation":543,"path":544,"seo":545,"source":546,"stem":547,"__hash__":548},"docs\u002Fdocs\u002Fbinding-inputs\u002Fmodifiers.md","Modifiers",{"type":7,"value":8,"toc":521},"minimark",[9,13,25,28,50,54,61,126,144,147,157,163,205,216,228,232,324,330,374,388,392,395,480,490,494,517],[10,11,5],"h1",{"id":12},"modifiers",[14,15,16],"blockquote",{},[17,18,19,20,24],"p",{},"Three knobs on the write side of ",[21,22,23],"code",{},"v-register",": when to write, what to clean up before writing, what type to land on.",[26,27],"docs-meta-table",{},[17,29,30,31,34,35,38,39,42,43,45,46,49],{},"Type into the lazy field and watch the readout only update on blur. Pad spaces around a word in the trimmed field to see them stripped. Type a number into the third field. Even though it's ",[21,32,33],{},"type=\"text\"",", the value lands in storage as a ",[21,36,37],{},"number"," thanks to ",[21,40,41],{},".number",". Each modifier composes with any text-family input; the ",[21,44,41],{}," modifier also applies to ",[21,47,48],{},"\u003Cselect>",".",[51,52],"docs-demo",{"label":53,"slug":12},"Modifiers Demo",[55,56,58],"h2",{"id":57},"lazy",[21,59,60],{},".lazy",[62,63,68],"pre",{"className":64,"code":65,"language":66,"meta":67,"style":67},"language-vue shiki shiki-themes github-light github-dark","\u003Cinput v-register.lazy=\"form.register('name')\" type=\"text\" \u002F>\n","vue","",[21,69,70],{"__ignoreMap":67},[71,72,75,79,83,87,89,91,94,98,101,104,107,110,113,115,118,120,123],"span",{"class":73,"line":74},"line",1,[71,76,78],{"class":77},"sVt8B","\u003C",[71,80,82],{"class":81},"s9eBZ","input",[71,84,86],{"class":85},"sScJk"," v-register",[71,88,49],{"class":77},[71,90,57],{"class":85},[71,92,93],{"class":77},"=",[71,95,97],{"class":96},"sZZnC","\"",[71,99,100],{"class":77},"form.",[71,102,103],{"class":85},"register",[71,105,106],{"class":77},"(",[71,108,109],{"class":96},"'name'",[71,111,112],{"class":77},")",[71,114,97],{"class":96},[71,116,117],{"class":85}," type",[71,119,93],{"class":77},[71,121,122],{"class":96},"\"text\"",[71,124,125],{"class":77}," \u002F>\n",[17,127,128,129,132,133,136,137,139,140,143],{},"Writes fire on ",[21,130,131],{},"change"," \u002F ",[21,134,135],{},"blur"," instead of every ",[21,138,82],{}," event. Matches Vue's ",[21,141,142],{},"v-model.lazy"," semantics, so readers familiar with the convention can reach for it without re-learning.",[17,145,146],{},"When to reach for it:",[148,149,150,154],"ul",{},[151,152,153],"li",{},"Heavy validation that's expensive on every keystroke (a sync refinement that walks a large list, an async refinement that hits a server).",[151,155,156],{},"A field that should commit a \"settled\" value, not an in-progress one.",[55,158,160],{"id":159},"trim",[21,161,162],{},".trim",[62,164,166],{"className":64,"code":165,"language":66,"meta":67,"style":67},"\u003Cinput v-register.trim=\"form.register('username')\" type=\"text\" \u002F>\n",[21,167,168],{"__ignoreMap":67},[71,169,170,172,174,176,178,180,182,184,186,188,190,193,195,197,199,201,203],{"class":73,"line":74},[71,171,78],{"class":77},[71,173,82],{"class":81},[71,175,86],{"class":85},[71,177,49],{"class":77},[71,179,159],{"class":85},[71,181,93],{"class":77},[71,183,97],{"class":96},[71,185,100],{"class":77},[71,187,103],{"class":85},[71,189,106],{"class":77},[71,191,192],{"class":96},"'username'",[71,194,112],{"class":77},[71,196,97],{"class":96},[71,198,117],{"class":85},[71,200,93],{"class":77},[71,202,122],{"class":96},[71,204,125],{"class":77},[17,206,207,208,211,212,215],{},"Strips leading and trailing whitespace from the DOM string before the write lands in storage. Cleaner storage values + cleaner validation (no ",[21,209,210],{},"\"hello   \""," failing a regex that meant to allow ",[21,213,214],{},"\"hello\"",").",[17,217,218,219,221,222,227],{},"The ",[21,220,162],{}," modifier runs before any ",[223,224,226],"a",{"href":225},"\u002Fdocs\u002Fbinding-inputs\u002Ftransforms","register transform"," you've supplied, so transforms see the already-trimmed value.",[55,229,230],{"id":37},[21,231,41],{},[62,233,235],{"className":64,"code":234,"language":66,"meta":67,"style":67},"\u003Cinput v-register.number=\"form.register('age')\" type=\"text\" \u002F>\n\u003Cselect v-register.number=\"form.register('priority')\">\n  …\n\u003C\u002Fselect>\n",[21,236,237,274,308,314],{"__ignoreMap":67},[71,238,239,241,243,245,247,249,251,253,255,257,259,262,264,266,268,270,272],{"class":73,"line":74},[71,240,78],{"class":77},[71,242,82],{"class":81},[71,244,86],{"class":85},[71,246,49],{"class":77},[71,248,37],{"class":85},[71,250,93],{"class":77},[71,252,97],{"class":96},[71,254,100],{"class":77},[71,256,103],{"class":85},[71,258,106],{"class":77},[71,260,261],{"class":96},"'age'",[71,263,112],{"class":77},[71,265,97],{"class":96},[71,267,117],{"class":85},[71,269,93],{"class":77},[71,271,122],{"class":96},[71,273,125],{"class":77},[71,275,277,279,282,284,286,288,290,292,294,296,298,301,303,305],{"class":73,"line":276},2,[71,278,78],{"class":77},[71,280,281],{"class":81},"select",[71,283,86],{"class":85},[71,285,49],{"class":77},[71,287,37],{"class":85},[71,289,93],{"class":77},[71,291,97],{"class":96},[71,293,100],{"class":77},[71,295,103],{"class":85},[71,297,106],{"class":77},[71,299,300],{"class":96},"'priority'",[71,302,112],{"class":77},[71,304,97],{"class":96},[71,306,307],{"class":77},">\n",[71,309,311],{"class":73,"line":310},3,[71,312,313],{"class":77},"  …\n",[71,315,317,320,322],{"class":73,"line":316},4,[71,318,319],{"class":77},"\u003C\u002F",[71,321,281],{"class":81},[71,323,307],{"class":77},[17,325,326,327,329],{},"Coerces the DOM string to a ",[21,328,37],{}," before the write. Useful in two specific shapes:",[148,331,332,352],{},[151,333,334,341,342,344,345,348,349,351],{},[335,336,337,340],"strong",{},[21,338,339],{},"\u003Cinput type=\"text\">"," for a numeric leaf."," The browser doesn't enforce numeric input on ",[21,343,33],{},", but the schema leaf is ",[21,346,347],{},"z.number()",". ",[21,350,41],{}," parses the string for you.",[151,353,354,359,360,363,364,367,368,370,371,49],{},[335,355,356,358],{},[21,357,48],{}," with numeric option values."," ",[21,361,362],{},"\u003Coption value=\"1\">"," only ever stores ",[21,365,366],{},"'1'"," in the DOM; the ",[21,369,41],{}," modifier coerces per-pick to ",[21,372,373],{},"1",[17,375,376,379,380,384,385,387],{},[21,377,378],{},"\u003Cinput type=\"number\">"," already coerces to a number through ",[223,381,383],{"href":382},"\u002Fdocs\u002Fbinding-inputs\u002Fcoercion","schema-driven coercion","; ",[21,386,41],{}," is for the cases where the input itself isn't numeric.",[55,389,391],{"id":390},"compose-freely","Compose freely",[17,393,394],{},"Modifiers compose with each other and with the rest of the binding surface:",[62,396,398],{"className":64,"code":397,"language":66,"meta":67,"style":67},"\u003Cinput v-register.lazy.trim=\"form.register('username')\" type=\"text\" \u002F>\n\u003Cinput v-register.number.lazy=\"form.register('age')\" type=\"text\" \u002F>\n",[21,399,400,440],{"__ignoreMap":67},[71,401,402,404,406,408,410,412,414,416,418,420,422,424,426,428,430,432,434,436,438],{"class":73,"line":74},[71,403,78],{"class":77},[71,405,82],{"class":81},[71,407,86],{"class":85},[71,409,49],{"class":77},[71,411,57],{"class":85},[71,413,49],{"class":77},[71,415,159],{"class":85},[71,417,93],{"class":77},[71,419,97],{"class":96},[71,421,100],{"class":77},[71,423,103],{"class":85},[71,425,106],{"class":77},[71,427,192],{"class":96},[71,429,112],{"class":77},[71,431,97],{"class":96},[71,433,117],{"class":85},[71,435,93],{"class":77},[71,437,122],{"class":96},[71,439,125],{"class":77},[71,441,442,444,446,448,450,452,454,456,458,460,462,464,466,468,470,472,474,476,478],{"class":73,"line":276},[71,443,78],{"class":77},[71,445,82],{"class":81},[71,447,86],{"class":85},[71,449,49],{"class":77},[71,451,37],{"class":85},[71,453,49],{"class":77},[71,455,57],{"class":85},[71,457,93],{"class":77},[71,459,97],{"class":96},[71,461,100],{"class":77},[71,463,103],{"class":85},[71,465,106],{"class":77},[71,467,261],{"class":96},[71,469,112],{"class":77},[71,471,97],{"class":96},[71,473,117],{"class":85},[71,475,93],{"class":77},[71,477,122],{"class":96},[71,479,125],{"class":77},[17,481,482,485,486,489],{},[21,483,484],{},".lazy.trim"," writes a stripped value on blur; ",[21,487,488],{},".number.lazy"," writes a parsed number on blur. Order in the template doesn't change the order of operations: the directive applies trim, then number, then writes.",[55,491,493],{"id":492},"where-to-next","Where to next",[148,495,496,502,508],{},[151,497,498,501],{},[223,499,500],{"href":225},"Register transforms",": for transformations that go beyond the three built-in modifiers.",[151,503,504,507],{},[223,505,506],{"href":382},"Schema-driven coercion",": what happens to the value after the modifier runs.",[151,509,510,516],{},[223,511,218,513,515],{"href":512},"\u002Fdocs\u002Fbinding-inputs\u002Fv-register",[21,514,23],{}," directive",": the binding the modifiers attach to.",[518,519,520],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":67,"searchDepth":276,"depth":276,"links":522},[523,524,525,526,527],{"id":57,"depth":276,"text":60},{"id":159,"depth":276,"text":162},{"id":37,"depth":276,"text":41},{"id":390,"depth":276,"text":391},{"id":492,"depth":276,"text":493},"Three modifiers (.lazy, .trim, .number) adjust how v-register writes back to storage on every keystroke or pick. Each composes with any text-family or select binding.","md",{},[532,535,537,540],{"label":533,"value":534},"Category","Directive binding",{"label":5,"value":536,"kind":21},".lazy · .trim · .number",{"label":538,"value":539,"kind":21},"Element","\u003Cinput> · \u003Ctextarea> · \u003Cselect>",{"label":541,"value":542},"Auto-installed","Yes",true,"\u002Fdocs\u002Fbinding-inputs\u002Fmodifiers",{"title":5,"description":528},null,"docs\u002Fbinding-inputs\u002Fmodifiers","eEI5DR4u1qXSYgW50VFLhBCsBUwonVJ-b-Tno_f_asg",1780949759408]