时间戳

首页 > 解决方案 > vue.js 将插值传递给属性（类）绑定的方法

vuejs2 - 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}}”。我尝试过使用类语法，但无法理解引号、双引号和反引号。

标签： vuejs2vuetify.jsstring-interpolation

解决方案

要通过x你只需要写：

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

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

推荐阅读