Meituan-Dianping/mpvue · warning
<input :type="${dynamicType}" v-model="${value}">: v-model d
Error message
<input :type="${dynamicType}" v-model="${value}">:
v-model does not support dynamic input types. Use v-if branches instead. What it means
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.
Source
Thrown at src/platforms/mp/compiler/directives/model.js:28
// so we used some reserved tokens during compile.
export const RANGE_TOKEN = '__r'
export const CHECKBOX_RADIO_TOKEN = '__c'
export default function model (
el: ASTElement,
dir: ASTDirective,
_warn: Function
): ?boolean {
warn = _warn
const value = dir.value
const modifiers = dir.modifiers
const tag = el.tag
const type = el.attrsMap.type
if (process.env.NODE_ENV !== 'production') {
const dynamicType = el.attrsMap['v-bind:type'] || el.attrsMap[':type']
if (tag === 'input' && dynamicType) {
warn(
`<input :type="${dynamicType}" v-model="${value}">:\n` +
`v-model does not support dynamic input types. Use v-if branches instead.`
)
}
// inputs with type="file" are read only and setting the input's
// value will throw an error.
if (tag === 'input' && type === 'file') {
warn(
`<${el.tag} v-model="${value}" type="file">:\n` +
`File inputs are read only. Use a v-on:change listener instead.`
)
}
}
if (el.component) {
genComponentModel(el, value, modifiers)
// component v-model doesn't need extra runtime
return falseView on GitHub (pinned to 6c5d78ee04)
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
Example fix
// before <input :type="showPassword ? 'password' : 'text'" v-model="value"> // after <input v-if="showPassword" type="password" v-model="value"> <input v-else type="text" v-model="value">
Defensive patterns
Strategy: validation
Validate before calling
// build-time template check
function assertStaticInputType (template) {
const m = /<input[^>]*(:type|v-bind:type)=/.exec(template)
if (m && /v-model=/.test(template)) {
throw new Error('v-model with dynamic :type is not supported in mp; use v-if branches')
}
} Prevention
- 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
When it happens
Trigger: Writing `<input :type="inputType" v-model="value">` in an mp-weixin target template where `inputType` is a reactive expression or prop.
Common situations: 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.
Related errors
- <${el.tag} v-model="${value}" type="file">: File inputs are
- <${el.tag} v-model="${value}">: v-model is not supported on
- 同一组件内嵌套的 v-for 不能连续使用相同的索引,目前为: ${arr}
- <input :type="${dynamicType}" v-model="${value}">: v-model d
- <${el.tag} v-model="${value}" type="file">: File inputs are
AI-assisted analysis of Meituan-Dianping/mpvue@6c5d78ee04 (2026-09-02).
Data as JSON: /api/errors/bd40e102f29156ed.
Report an issue: GitHub.