Meituan-Dianping/mpvue · warning

<${el.tag} v-model="${value}">: v-model is not supported on

Error message

<${el.tag} v-model="${value}">: v-model is not supported on this element type. If you are working with contenteditable, it's recommended to wrap a library dedicated for that purpose inside a custom component.

What it means

The mp compiler's `model` directive transforms `v-model` on known form tags or on components. If the tag is neither a supported form element nor a registered/reserved component (i.e., `config.isReservedTag(tag)` is true but the tag isn't modelable), `v-model` cannot generate any binding and the compiler warns.

Source

Thrown at src/platforms/mp/compiler/directives/model.js:60

  if (el.component) {
    genComponentModel(el, value, modifiers)
    // component v-model doesn't need extra runtime
    return false
  } else if (tag === 'select') {
    genSelect(el, value, modifiers)
  } else if (tag === 'input' && type === 'checkbox') {
    genCheckboxModel(el, value, modifiers)
  } else if (tag === 'input' && type === 'radio') {
    genRadioModel(el, value, modifiers)
  } else if (tag === 'input' || tag === 'textarea') {
    genDefaultModel(el, value, modifiers)
  } else if (!config.isReservedTag(tag)) {
    genComponentModel(el, value, modifiers)
    // component v-model doesn't need extra runtime
    return false
  } else if (process.env.NODE_ENV !== 'production') {
    warn(
      `<${el.tag} v-model="${value}">: ` +
      `v-model is not supported on this element type. ` +
      'If you are working with contenteditable, it\'s recommended to ' +
      'wrap a library dedicated for that purpose inside a custom component.'
    )
  }

  // ensure runtime directive metadata
  return true
}

function genCheckboxModel (
  el: ASTElement,
  value: string,
  modifiers: ?ASTModifiers
) {
  const number = modifiers && modifiers.number
  const valueBinding = getBindingAttr(el, 'value') || 'null'

View on GitHub (pinned to 6c5d78ee04)

Solutions

1. Use v-model only on supported form elements (`input`, `textarea`, `picker`, etc.) in mp targets
2. For contenteditable, wrap a dedicated library inside a custom component and use value/input events
3. For non-form elements, bind explicitly with `:prop` + `@event` instead of v-model
4. Fix tag-name typos that make the element an unmodelable reserved tag

Example fix

// before
<div v-model="text"></div>
// after
<div>{{ text }}</div>
<input v-model="text">

const MODELABLE = ['input', 'textarea', 'select', 'picker']
function assertModelableTag (tag, isComponent) {
  if (!MODELABLE.includes(tag) && !isComponent) {
    throw new Error(`v-model not supported on <${tag}>`) 
  }
}

When it happens

Trigger: `v-model` on unsupported reserved elements like `<div>`, `<span>`, `<form>`, `<img>`, or on contenteditable elements in an mp target template.

Common situations: Typos in tag names; trying to two-way-bind non-form elements; contenteditable editors (not supported by v-model by design); copy-pasted templates targeting the wrong platform.

Related errors

• <input :type="${dynamicType}" v-model="${value}">: v-model d
• <${el.tag} v-model="${value}" type="file">: File inputs are
• 同一组件内嵌套的 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/86e9a4f58a03292e. Report an issue: GitHub.