{"record":{"id":"bd40e102f29156ed","repo":"Meituan-Dianping/mpvue","slug":"input-type-dynamictype-v-model-value","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":"warning","filePath":"src/platforms/mp/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/mp/compiler/directives/model.js#L10-L46","documentation":"In the mini-program (mp) compiler, applying `v-model` to an `<input>` whose `type` is dynamically bound (`:type`/`v-bind:type`) is unsupported, because the compiled model binding cannot know the runtime input type. The compiler emits this warning at build time.","triggerScenarios":"Writing `<input :type=\"inputType\" v-model=\"value\">` in an mp-weixin target template where `inputType` is a reactive expression or prop.","commonSituations":"Reusable form-field components that take the input type as a prop; switching between text/password fields dynamically; porting web Vue templates to mini-program targets where the constraint is stricter than web Vue.","solutions":["Use `v-if`/`v-else` branches, one per concrete type, each with a static `type` and its own `v-model`","Bind the type statically if possible and switch via separate inputs","Compute the value binding per branch instead of sharing one v-model"],"exampleFix":"// before\n<input :type=\"showPassword ? 'password' : 'text'\" v-model=\"value\">\n// after\n<input v-if=\"showPassword\" type=\"password\" v-model=\"value\">\n<input v-else type=\"text\" v-model=\"value\">","handlingStrategy":"validation","validationCode":"// build-time template check\nfunction assertStaticInputType (template) {\n  const m = /<input[^>]*(:type|v-bind:type)=/.exec(template)\n  if (m && /v-model=/.test(template)) {\n    throw new Error('v-model with dynamic :type is not supported in mp; use v-if branches')\n  }\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Never combine :type with v-model on mp targets","Use v-if branches per input type","Keep form-field wrapper components rendering explicit static-type inputs","Lint templates for :type + v-model co-occurrence"],"tags":["v-model","compiler","mini-program","input"],"backgroundTag":"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"}