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 false

View on GitHub (pinned to 6c5d78ee04)

Solutions

  1. Use `v-if`/`v-else` branches, one per concrete type, each with a static `type` and its own `v-model`
  2. Bind the type statically if possible and switch via separate inputs
  3. 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

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


AI-assisted analysis of Meituan-Dianping/mpvue@6c5d78ee04 (2026-09-02). Data as JSON: /api/errors/bd40e102f29156ed. Report an issue: GitHub.