VueJS/Vuetify v-for 中的不同颜色芯片，检查带有参数的对象：使用点表示法的颜色

Question

我正在尝试通过使用一种方法来设置 v-chip 的颜色，传递一个参数并尝试对 return 颜色字符串使用圆点表示法：

<v-chip :color="stateColor(bug.workflow_state)" text-color="white">{{ bug.workflow_state }}</v-chip>

正在将正确的值传递给该方法。我的 argument: color 对象看起来像这样...

stateColors: {
  open: 'green',
  accepted: 'yellow',
  in_progress: 'orange'
}

...在数据函数中设置。我希望能够 return a la:

stateColor (bugState) {
  return this.stateColors.bugState
}

但 this.stateColors.bugState 未定义。传入的 workflow_states 将全部匹配键，无一例外。这似乎更适合作为计算属性，但我也对点符号 return 预期结果有疑问。我的尝试是这样的：

stateColor: function () {
  return function (bugState) {
    return this.stateColors.bugState
  }
}

在两次尝试中，this.stateColors.open return 绿色，但 this.stateColors.bugState 其中 bugState 实际上是 'open' return 未定义。 typeof(bugState) 绝对是一个字符串。只是在寻找一种干净的方法来实现这一点，而无需大量的 if 检查，我知道这是可行的。

Answer 1

您只是在询问 bugState 属性，它可能不存在。

相反，请求匹配您的 bugState 变量的密钥：

return this.stateColors[bugState]

VueJS/Vuetify v-for 中的不同颜色芯片，检查带有参数的对象：使用点表示法的颜色

VueJS/Vuetify different color chips in v-for, checking against an object with argument: color using dot notation

javascript

vue.js

computed-properties

vuejs2

vuetify.js