{"record":{"id":"34b5832f98d2b109","repo":"Meituan-Dianping/mpvue","slug":"class-staticclass-interpolation-inside-attri-34b583","errorCode":null,"errorMessage":"class=\"${staticClass}\": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class=\"{{ val }}\">, use <div :class=\"val\">.","messagePattern":"class=\"(.+?)\": Interpolation inside attributes has been removed\\. Use v-bind or the colon shorthand instead\\. For example, instead of <div class=\"(.+?)\\}\">, use <div :class=\"val\">\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/platforms/mp/compiler/modules/class.js","lineNumber":16,"sourceCode":"/* @flow */\n\nimport { parseText } from 'compiler/parser/text-parser'\nimport {\n  getAndRemoveAttr,\n  getBindingAttr,\n  baseWarn\n} from 'compiler/helpers'\n\nfunction transformNode (el: ASTElement, options: CompilerOptions) {\n  const warn = options.warn || baseWarn\n  const staticClass = getAndRemoveAttr(el, 'class')\n  if (process.env.NODE_ENV !== 'production' && staticClass) {\n    const expression = parseText(staticClass, options.delimiters)\n    if (expression) {\n      warn(\n        `class=\"${staticClass}\": ` +\n        'Interpolation inside attributes has been removed. ' +\n        'Use v-bind or the colon shorthand instead. For example, ' +\n        'instead of <div class=\"{{ val }}\">, use <div :class=\"val\">.'\n      )\n    }\n  }\n  if (staticClass) {\n    el.staticClass = JSON.stringify(staticClass)\n  }\n  const classBinding = getBindingAttr(el, 'class', false /* getStatic */)\n  if (classBinding) {\n    el.classBinding = classBinding\n  }\n}\n\nfunction genData (el: ASTElement): string {\n  let data = ''","sourceCodeStart":1,"sourceCodeEnd":34,"githubUrl":"https://github.com/Meituan-Dianping/mpvue/blob/6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b/src/platforms/mp/compiler/modules/class.js#L1-L34","documentation":"The Vue (mp platform) template compiler detected Vue 1-style mustache interpolation inside a static `class` attribute, e.g. class=\"{{ val }}\". Attribute interpolation was removed in Vue 2; reactive classes must go through v-bind. The compiler warns and the binding simply will not work.","triggerScenarios":"Compiling a template element that has a plain `class` attribute whose value contains the configured text delimiters (e.g. class=\"{{ activeClass }}\"), during transformNode in dev mode.","commonSituations":"Migrating a Vue 1 codebase to Vue 2; copy-pasting template examples from old tutorials; writing class=\"{{ 'btn ' + variant }}\" by analogy with text interpolation.","solutions":["Bind the attribute instead: replace class=\"{{ val }}\" with :class=\"val\".","If the value is truly static, remove the mustaches and write a plain string class.","Use object/array syntax for conditional classes: :class=\"{ active: isActive }\"."],"exampleFix":"// before\n<div class=\"btn {{ activeClass }}\">\n// after\n<div class=\"btn\" :class=\"activeClass\">","handlingStrategy":"validation","validationCode":"function assertNoAttrInterpolation (template, attr = 'class', delims = ['{{', '}}']) {\n  const re = new RegExp(attr + \"\\\\s*=\\\\s*[\\\"'][^\\\"']*\" + delims[0] + \"[\\\\s\\\\S]*?\" + delims[1])\n  if (re.test(template)) throw new Error('Interpolation in ' + attr + ' attr; use :' + attr + ' instead')\n}\nassertNoAttrInterpolation('<div class=\"{{ v }}\">', 'class')","typeGuard":"const hasAttrInterpolation = (attrVal, delims = ['{{', '}}']) =>\n  typeof attrVal === 'string' && attrVal.includes(delims[0]) && attrVal.includes(delims[1]);","tryCatchPattern":null,"preventionTips":["Always use :class / :style for anything dynamic","Enable eslint-plugin-vue template rules in CI","Grep legacy templates for class=\"{{ and style=\"{{ during migrations","Compile templates in dev mode so warnings surface early"],"tags":["vue","template-compiler","migration"],"backgroundTag":"vue-attribute-interpolation-removed","analyzedSha":"6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b","analyzedAt":"2026-09-02T05:17:40.946Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T11:17:12.671Z"}