{"record":{"id":"631ae09fba83865b","repo":"Meituan-Dianping/mpvue","slug":"name-value-interpolation-inside-attribute","errorCode":null,"errorMessage":"${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\">.","messagePattern":"(.+?)=\"(.+?)\": Interpolation inside attributes has been removed\\. Use v-bind or the colon shorthand instead\\. For example, instead of <div id=\"(.+?)\\}\">, use <div :id=\"val\">\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/weex-template-compiler/build.js","lineNumber":1826,"sourceCode":"      } else { // normal directives\n        name = name.replace(dirRE, '');\n        // parse arg\n        var argMatch = name.match(argRE);\n        var arg = argMatch && argMatch[1];\n        if (arg) {\n          name = name.slice(0, -(arg.length + 1));\n        }\n        addDirective(el, name, rawName, value, arg, modifiers);\n        if (process.env.NODE_ENV !== 'production' && name === 'model') {\n          checkForAliasModel(el, value);\n        }\n      }\n    } else {\n      // literal attribute\n      if (process.env.NODE_ENV !== 'production') {\n        var expression = parseText(value, delimiters);\n        if (expression) {\n          warn(\n            name + \"=\\\"\" + value + \"\\\": \" +\n            'Interpolation inside attributes has been removed. ' +\n            'Use v-bind or the colon shorthand instead. For example, ' +\n            'instead of <div id=\"{{ val }}\">, use <div :id=\"val\">.'\n          );\n        }\n      }\n      addAttr(el, name, JSON.stringify(value));\n    }\n  }\n}\n\nfunction checkInFor (el) {\n  var parent = el;\n  while (parent) {\n    if (parent.for !== undefined) {\n      return true\n    }","sourceCodeStart":1808,"sourceCodeEnd":1844,"githubUrl":"https://github.com/Meituan-Dianping/mpvue/blob/6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b/packages/weex-template-compiler/build.js#L1808-L1844","documentation":"Mustache interpolation ({{ }}) inside a plain (non-v-bind) attribute is no longer supported: attributes are string literals and cannot receive reactive updates. The compiler detects interpolation via parseText and warns, telling you to use v-bind or the : shorthand so the attribute compiles to a dynamic binding.","triggerScenarios":"Writing an attribute like id=\"{{ val }}\" or href=\"{{ url }}\" without v-bind, so in the attribute handling path parseText(value, delimiters) returns an expression and dev-mode warn fires.","commonSituations":"Upgrading from Vue 1.x where attribute interpolation was legal (a common 1.x → 2.x migration break), or copying HTML from other templating engines (Handlebars-style) into Vue templates.","solutions":["Convert the attribute to v-bind: v-bind:id=\"val\" or the :id=\"val\" shorthand","Remove the mustaches and hardcode a static value if the attribute need not be dynamic","Sweep legacy templates for attribute=\"{{ }}\" patterns when migrating from Vue 1"],"exampleFix":"// before\n<div id=\"{{ val }}\">\n// after\n<div :id=\"val\">","handlingStrategy":"validation","validationCode":"function attrInterpolation(template) {\n  // matches attributes whose value contains {{ }} but no v-bind prefix\n  const re = /(?<!v-[:a-z])\\s([\\w-]+)=\"[^\"]*\\{\\{[^}]*\\}\\}[^\"]*\"/g;\n  const bad = [];\n  let m;\n  while ((m = re.exec(template))) bad.push(`${m[1]}=\"${m[0].match(/\"[^\"]*\"/)[0]}\"`);\n  return bad;\n}","typeGuard":"function hasNoAttrInterpolation(template) {\n  return typeof template === 'string' && attrInterpolation(template).length === 0;\n}","tryCatchPattern":null,"preventionTips":["Always use :attr=\"expr\" (v-bind) for dynamic attribute values","Sweep legacy Vue 1 / Handlebars templates for attr=\"{{ }}\" before migrating","Enable eslint-plugin-vue's no-mustache-in-attribute style checks"],"tags":["interpolation","v-bind","migration","template","vue","weex"],"backgroundTag":"interpolation-inside-attribute","analyzedSha":"6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b","analyzedAt":"2026-09-02T05:17:40.946Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T11:17:12.671Z"}