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

我正在使用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}}”。我曾尝试使用类语法,但无法理解引号,双引号和反引号。

liweisb 回答:vue.js将插值传递给属性(类)绑定的方法

要通过x,您只需要写:

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

v-bind(或简称:)绑定的属性已经是JavaScript表达式,并且可以直接访问x。无需在该表达式中引入任何其他形式的模板化或内插。

本文链接:https://www.f2er.com/3014042.html

大家都在问