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

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 是一种根据 x 是否在状态数组中返回 true 或 false 的方法

方法调用正在工作：我可以从开发人员工具调用它们，如果我使用数组值对按钮和方法调用进行硬编码，它也可以工作。 问题是 {{x}} 的内插值没有传递到方法调用中，而是传递文本"{{x}}"。 我尝试使用类语法，但无法绕过引号、双引号和反引号。

Answer 1

要通过x，你只需要写：

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

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