Meituan-Dianping/mpvue · warning
class=" ": Interpolation inside attributes has been…
Error message
class="${staticClass}": Interpolation inside attributes has been deprecated. Use v-bind or the colon shorthand instead. What it means
In the Weex template compiler, the class module detects interpolation ({{ }}) inside a static class attribute and warns that mixing interpolation into plain attributes is deprecated. The value is still parsed as dynamic (classResult), but you should migrate to v-bind:class / :class, which is the supported syntax.
Solutions
- Replace attribute interpolation with the bind shorthand: :class="'btn ' + activeClass" or :class="['btn', activeClass]".
- Move dynamic classes into the data model and use object/array syntax: :class="{ active: isActive }".
- Audit templates for {{ }} inside any attribute and convert them to v-bind/colon shorthand.
Example fix
// before
class="btn {{activeClass}}"
// after
:class="['btn', activeClass]" Defensive patterns
Strategy: validation
Validate before calling
// lint-time guard for templates
function hasAttributeInterpolation(tpl) {
return /(?:class|style)="[^"]*\{\{/.test(tpl)
}
// fail CI if hasAttributeInterpolation(templateSource) is true Prevention
- Never put {{ }} inside plain attributes; use :class / v-bind:class.
- Prefer object/array class syntax: :class="{ active: isActive }".
- Run vue/Weex compiler warnings in CI and treat deprecations as errors.
- Update Vue 1.x templates when migrating to Vue 2.
When it happens
Trigger: Compiling a Weex template containing class="btn {{activeClass}}" or similar — the static class attribute contains {{...}} so parseStaticClass marks it dynamic, triggering the deprecation warning when staticClass is present.
Common situations: Templates copied from Vue 1.x code that allowed attribute interpolation; gradual Vue 1 → 2 migrations; hand-written templates mixing string concatenation habits with the new binding syntax.
Related errors
- style=" ": Interpolation inside attributes has been…
- < v-model=" " type="file">: File inputs are read only. Use…
- < v-model=" ">: v-model is not supported on this element…
- <input :type=" " v-model=" ">: v-model does not support…
- invalid template option
AI-assisted analysis of Meituan-Dianping/mpvue@6c5d78ee04 (2026-09-02).
Data as JSON: /api/errors/92eadef2eedc2e9d.
Report an issue: GitHub.
Appendix: source
Thrown at src/platforms/weex/compiler/modules/class.js:20
import { parseText } from 'compiler/parser/text-parser'
import {
getAndRemoveAttr,
getBindingAttr,
baseWarn
} from 'compiler/helpers'
type StaticClassResult = {
dynamic: boolean,
classResult: string
};
function transformNode (el: ASTElement, options: CompilerOptions) {
const warn = options.warn || baseWarn
const staticClass = getAndRemoveAttr(el, 'class')
const { dynamic, classResult } = parseStaticClass(staticClass, options)
if (process.env.NODE_ENV !== 'production' && dynamic && staticClass) {
warn(
`class="${staticClass}": ` +
'Interpolation inside attributes has been deprecated. ' +
'Use v-bind or the colon shorthand instead.'
)
}
if (!dynamic && classResult) {
el.staticClass = classResult
}
const classBinding = getBindingAttr(el, 'class', false /* getStatic */)
if (classBinding) {
el.classBinding = classBinding
} else if (dynamic) {
el.classBinding = classResult
}
}
function genData (el: ASTElement): string {
let data = ''View on GitHub (pinned to 6c5d78ee04)