Vue.js - 'v-bind' 指令需要属性值 (vue/valid-v-bind)

Question

我目前正在尝试通过以下方式将类绑定到元素：

v-bind:class="{
    `bg-${activeTheme.name}-500 text-white`: styleFilter.active,
    `bg-${activeTheme.name}-400 text-black`: !styleFilter.active,
}"

但是，我收到以下错误：

Parsing error: Line 2: Unexpected token和'v-bind' directives require an attribute value (vue/valid-v-bind)。

我在这里做错了什么？

Answer 1

尝试这样的事情：

<div
  :class="{
    [`bg-${activeTheme.name}-500 text-white`]: styleFilter.active,
    [`bg-${activeTheme.name}-400 text-black`]: !styleFilter.active,
  }"
>
  teste
</div>

因为如果属性的名称是动态的，则必须使用 来声明它[]。