{"record":{"id":"76c12026b7e46f69","repo":"Meituan-Dianping/mpvue","slug":"class-staticclass-interpolation-inside-attri-76c120","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/web/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/web/compiler/modules/class.js#L1-L34","documentation":"Web platform equivalent of the class interpolation warning: mustaches inside a static class attribute are no longer supported in Vue 2. The compiler's transformNode parses the attribute with the configured delimiters and warns in dev mode when interpolation syntax is found.","triggerScenarios":"Compiling any template where a `class` attribute value contains delimiters (class=\"{{ val }}\") during transformNode with NODE_ENV not production.","commonSituations":"Vue 1 migration; legacy templates; copying interpolated attribute syntax from old docs or Stack Overflow answers.","solutions":["Change class=\"{{ val }}\" to :class=\"val\".","Use :class object/array syntax for conditional class lists.","Remove mustaches if the class is static."],"exampleFix":"// before\n<div class=\"{{ classes }}\">\n// after\n<div :class=\"classes\">","handlingStrategy":"validation","validationCode":"function assertNoClassInterpolation (template) {\n  if (/class\\s*=\\s*[\"'][^\"']*\\{\\{/.test(template)) {\n    throw new Error('Interpolation in class attr; use :class instead')\n  }\n}\nassertNoClassInterpolation('<div class=\"{{ v }}\">')","typeGuard":"const isStaticClass = (v) => typeof v === 'string' && !v.includes('{{');","tryCatchPattern":null,"preventionTips":["Use :class for dynamic classes","Enable eslint-plugin-vue template checks","Scan legacy templates for class=\"{{ during upgrades","Compile dev builds in tests to surface warnings"],"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"}