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

Posted 2023-02-23

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

【英文标题】：VueJS/Vuetify different color chips in v-for, checking against an object with argument: color using dot notation

【发布时间】：2019-03-14 12:50:19

【问题描述】：

我正在尝试通过使用方法、传递参数并尝试使用点符号返回颜色字符串来设置v-chip 的颜色：

<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'

...在数据函数中设置。我希望能够只返回一个 la：

stateColor (bugState) 
  return this.stateColors.bugState

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

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

在这两种尝试中，this.stateColors.open 确实返回绿色，但 this.stateColors.bugState 其中 bugState 实际上是“打开”返回未定义。 typeof(bugState) 绝对是一个字符串。只是寻找一种干净的方法来实现这一点，而不需要大量的 if 检查，我知道这会起作用。

【参考方案1】：

您只是要求bugState 属性，它可能不存在。

相反，请询问与您的 bugState 变量匹配的密钥：

return this.stateColors[bugState]

【讨论】：

我确实发现了。不过谢谢一百万！