{"record":{"id":"f3347b19c11b4991","repo":"Meituan-Dianping/mpvue","slug":"style-staticstyle-interpolation-inside-attri","errorCode":null,"errorMessage":"style=\"${staticStyle}\": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div style=\"{{ val }}\">, use <div :style=\"val\">.","messagePattern":"style=\"(.+?)\": Interpolation inside attributes has been removed\\. Use v-bind or the colon shorthand instead\\. For example, instead of <div style=\"(.+?)\\}\">, use <div :style=\"val\">\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/platforms/mp/compiler/modules/style.js","lineNumber":19,"sourceCode":"/* @flow */\n\nimport { parseText } from 'compiler/parser/text-parser'\nimport { parseStyleText } from 'web/util/style'\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 staticStyle = getAndRemoveAttr(el, 'style')\n  if (staticStyle) {\n    /* istanbul ignore if */\n    if (process.env.NODE_ENV !== 'production') {\n      const expression = parseText(staticStyle, options.delimiters)\n      if (expression) {\n        warn(\n          `style=\"${staticStyle}\": ` +\n          'Interpolation inside attributes has been removed. ' +\n          'Use v-bind or the colon shorthand instead. For example, ' +\n          'instead of <div style=\"{{ val }}\">, use <div :style=\"val\">.'\n        )\n      }\n    }\n    el.staticStyle = JSON.stringify(parseStyleText(staticStyle))\n  }\n\n  const styleBinding = getBindingAttr(el, 'style', false /* getStatic */)\n  if (styleBinding) {\n    el.styleBinding = styleBinding\n  }\n}\n\nfunction genData (el: ASTElement): string {\n  let data = ''","sourceCodeStart":1,"sourceCodeEnd":37,"githubUrl":"https://github.com/Meituan-Dianping/mpvue/blob/6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b/src/platforms/mp/compiler/modules/style.js#L1-L37","documentation":"The mp compiler found mustache interpolation inside a static `style` attribute. Since Vue 2, attribute interpolation is unsupported; dynamic styles must use v-bind. The warning is emitted during compilation in dev builds.","triggerScenarios":"Compiling an element with style=\"{{ someStyle }}\" (delimiters present in the static style attribute value) via transformNode when NODE_ENV is not production.","commonSituations":"Vue 1 to Vue 2 migration; old templates where styles were interpolated; misunderstanding that text interpolation applies to attributes.","solutions":["Use :style=\"val\" (v-bind:style) instead of style=\"{{ val }}\".","Pass style objects/arrays via v-bind: :style=\"{ color: textColor }\".","Keep purely static CSS in a plain style attribute without mustaches."],"exampleFix":"// before\n<div style=\"color: {{ textColor }}\">\n// after\n<div :style=\"{ color: textColor }\">","handlingStrategy":"validation","validationCode":"function assertNoStyleInterpolation (template) {\n  if (/style\\s*=\\s*[\"'][^\"']*\\{\\{/.test(template)) {\n    throw new Error('Interpolation in style attr; use :style instead')\n  }\n}\nassertNoStyleInterpolation('<div style=\"width: {{ w }}px\">')","typeGuard":"const isStaticStyle = (styleVal) => typeof styleVal === 'string' && !styleVal.includes('{{');","tryCatchPattern":null,"preventionTips":["Use :style with objects/arrays for dynamic styles","Lint templates with eslint-plugin-vue to catch legacy syntax","Audit Vue 1 templates during migration with a regex scan for style=\"{{","Compile in dev mode so the warning is visible"],"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"}