{"record":{"id":"b2126496b981abde","repo":"Meituan-Dianping/mpvue","slug":"input-type-dynamictype-v-model-value-b21264","errorCode":null,"errorMessage":"<input :type=\"${dynamicType}\" v-model=\"${value}\">:\nv-model does not support dynamic input types. Use v-if branches instead.","messagePattern":"<input :type=\"(.+?)\" v-model=\"(.+?)\">:\nv-model does not support dynamic input types\\. Use v-if branches instead\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/platforms/web/compiler/directives/model.js","lineNumber":28,"sourceCode":"// so we used some reserved tokens during compile.\nexport const RANGE_TOKEN = '__r'\nexport const CHECKBOX_RADIO_TOKEN = '__c'\n\nexport default function model (\n  el: ASTElement,\n  dir: ASTDirective,\n  _warn: Function\n): ?boolean {\n  warn = _warn\n  const value = dir.value\n  const modifiers = dir.modifiers\n  const tag = el.tag\n  const type = el.attrsMap.type\n\n  if (process.env.NODE_ENV !== 'production') {\n    const dynamicType = el.attrsMap['v-bind:type'] || el.attrsMap[':type']\n    if (tag === 'input' && dynamicType) {\n      warn(\n        `<input :type=\"${dynamicType}\" v-model=\"${value}\">:\\n` +\n        `v-model does not support dynamic input types. Use v-if branches instead.`\n      )\n    }\n    // inputs with type=\"file\" are read only and setting the input's\n    // value will throw an error.\n    if (tag === 'input' && type === 'file') {\n      warn(\n        `<${el.tag} v-model=\"${value}\" type=\"file\">:\\n` +\n        `File inputs are read only. Use a v-on:change listener instead.`\n      )\n    }\n  }\n\n  if (el.component) {\n    genComponentModel(el, value, modifiers)\n    // component v-model doesn't need extra runtime\n    return false","sourceCodeStart":10,"sourceCodeEnd":46,"githubUrl":"https://github.com/Meituan-Dianping/mpvue/blob/6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b/src/platforms/web/compiler/directives/model.js#L10-L46","documentation":"v-model on an <input> whose `type` attribute is dynamically bound (:type or v-bind:type) cannot be compiled, because the compiler must know the input kind to generate the correct runtime model code. The compiler warns at build time in dev mode.","triggerScenarios":"Compiling `<input :type=\"inputType\" v-model=\"value\">` (or v-bind:type) in the web model compiler directive when tag is 'input' and a dynamic type binding exists.","commonSituations":"Reusable input components switching between text/checkbox/etc. via :type while using v-model; form builders with configurable input types.","solutions":["Use v-if/v-else branches, one per concrete type, each with its own v-model.","Replace v-model with :value + @input and handle types manually.","Fix the type statically if it does not actually vary."],"exampleFix":"// before\n<input :type=\"type\" v-model=\"value\">\n// after\n<input v-if=\"type === 'text'\" type=\"text\" v-model=\"value\">\n<input v-else type=\"checkbox\" v-model=\"value\">","handlingStrategy":"validation","validationCode":"function assertStaticTypeForVModel (template) {\n  const inputs = template.match(/<input\\b[^>]*>/g) || []\n  for (const tag of inputs) {\n    if (/v-model/.test(tag) && /(:type|v-bind:type)/.test(tag)) {\n      throw new Error('v-model on input with dynamic :type not allowed; use v-if branches')\n    }\n  }\n}\nassertStaticTypeForVModel('<input :type=\"t\" v-model=\"v\">')","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Keep type static when using v-model","Use v-if/v-else per input type","Prefer :value + @input for fully dynamic inputs","Compile with dev warnings on in tests"],"tags":["vue","v-model","compiler"],"backgroundTag":"vue-v-model-dynamic-input-type","analyzedSha":"6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b","analyzedAt":"2026-09-02T05:17:40.946Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T11:17:12.671Z"}