{"record":{"id":"57cd0b299425dd89","repo":"Meituan-Dianping/mpvue","slug":"style-staticstyle-interpolation-inside-attri-57cd0b","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/web/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/web/compiler/modules/style.js#L1-L37","documentation":"Web platform style-attribute interpolation warning: style=\"{{ val }}\" is unsupported since Vue 2. transformNode runs parseText on the static style attribute and warns in dev builds when delimiters are detected.","triggerScenarios":"Compiling a template element with a static `style` attribute containing mustache delimiters (e.g. style=\"width: {{ w }}px\") in dev mode.","commonSituations":"Vue 1 to Vue 2 migration; dynamically built inline styles in old code; templates from legacy libraries.","solutions":["Use :style=\"styleObject\" or :style=\"cssString\" instead of interpolation.","Compute units/width in JS: :style=\"{ width: w + 'px' }\".","Move static styles to a plain style attribute or CSS classes."],"exampleFix":"// before\n<div style=\"width: {{ width }}px\">\n// after\n<div :style=\"{ width: width + 'px' }\">","handlingStrategy":"validation","validationCode":"function assertNoStyleInterpolationWeb (template) {\n  if (/style\\s*=\\s*[\"'][^\"']*\\{\\{/.test(template)) {\n    throw new Error('Interpolation in style attr; use :style instead')\n  }\n}\nassertNoStyleInterpolationWeb('<div style=\"{{ s }}\">')","typeGuard":"const isStaticStyleWeb = (v) => typeof v === 'string' && !v.includes('{{');","tryCatchPattern":null,"preventionTips":["Use :style bindings for dynamic inline styles","Move static styles into CSS classes","Lint templates in CI with eslint-plugin-vue","Regex-scan migrations for style=\"{{"],"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"}