vue.js 将内插值传递给属性 (class) 绑定的方法

Question

我正在使用 v-for 创建一个动态生成的按钮列表。我希望按钮根据按钮实体是否包含在应用程序状态对象的数组中来更改颜色。（我正在使用 vuetify，这就是按钮对象是 v-btn 的原因）

<span v-for="x in ['A','B','C','D','E','F','G','H']">
  <v-btn small elevation-10 :color="xIsSelected('{{x}}')?'blue':'purple'" @click="toggleX('{{x}}')" >{{x}}</v-btn>
</span>

toggleX 是一种方法，可以从状态数组中添加或删除 x 的值； xIsSelected 是 returns true 或 false 取决于 x 是否在状态数组中的方法

方法调用有效：我可以从开发人员工具中调用它们，如果我对按钮和方法调用进行硬编码，它也可以使用数组值。问题是 {{x}} 的内插值没有被传递到方法调用中，而是传递了文字“{{x}}”。我曾尝试使用 class 语法，但无法理解引号、双引号和反引号。

Answer 1

要通过 x 你只需要写：

:color="xIsSelected(x) ? 'blue' : 'purple'"

与 v-bind（或 shorthand :）绑定的属性已经是 JavaScript 表达式，它们可以直接访问 x。无需在该表达式中引入任何其他形式的模板或插值。

vue.js 将内插值传递给属性 (class) 绑定的方法

vue.js pass interpolated value to method for attribute (class) binding

vuejs2

vuetify.js

string-interpolation