Meituan-Dianping/mpvue · error

${name}="${value}": Interpolation inside attributes has been

Error message

${name}="${value}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

What it means

Error "${name}="${value}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">." thrown in Meituan-Dianping/mpvue.

Source

Thrown at src/compiler/parser/index.js:514

      } else { // normal directives
        name = name.replace(dirRE, '')
        // parse arg
        const argMatch = name.match(argRE)
        const arg = argMatch && argMatch[1]
        if (arg) {
          name = name.slice(0, -(arg.length + 1))
        }
        addDirective(el, name, rawName, value, arg, modifiers)
        if (process.env.NODE_ENV !== 'production' && name === 'model') {
          checkForAliasModel(el, value)
        }
      }
    } else {
      // literal attribute
      if (process.env.NODE_ENV !== 'production') {
        const expression = parseText(value, delimiters)
        if (expression) {
          warn(
            `${name}="${value}": ` +
            'Interpolation inside attributes has been removed. ' +
            'Use v-bind or the colon shorthand instead. For example, ' +
            'instead of <div id="{{ val }}">, use <div :id="val">.'
          )
        }
      }
      addAttr(el, name, JSON.stringify(value))
    }
  }
}

function checkInFor (el: ASTElement): boolean {
  let parent = el
  while (parent) {
    if (parent.for !== undefined) {
      return true
    }

View on GitHub (pinned to 6c5d78ee04)

Solutions

1. Replace attribute interpolation with v-bind: <div :id="val"> instead of <div id="{{ val }}">
2. This is a removed Vue 1.x feature in Vue 2 — all dynamic attributes must use v-bind or the : shorthand
3. Use object/array syntax with v-bind for multiple dynamic attributes

When it happens

Trigger: Thrown at src/compiler/parser/index.js:514 when the library encounters an invalid state.

Common situations: See trigger scenarios.

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