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

Question

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

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

但是，我收到以下错误:

解析错误:第 2 行:意外标记 和 'v-bind' 指令需要一个属性值 (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>

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