我有一个包含3个可能值的表：佛罗伦萨、罗马和米兰。这3个值需要与3种不同的颜色相关联。
在页面加载时，每个值都应该以其关联的颜色呈现。
不能使用内联条件渲染，因为它只能保存2个值。
我试过使用下面这样的函数（$missing_item是一个v-for单一属性，它是从$missing_items（一个外部数组属性）中获得的）
function getColour($missing_item){
switch($missing_item.Deposito){
case $missing_item.Deposito == 'Firenze':
return 'text-green-400';
case $missing_item.Deposito == 'Roma':
return 'text-orange-400';
case $missing_item.Deposito == 'Milano':
return 'text-green-400';
}
}我这样调用函数：:class="changeColour()"
但我总是得到同样的错误：
“未捕获（在承诺中）TypeError：无法读取未定义的属性（阅读'Deposito'）”
。
在这一点上，我的主要问题是如何访问函数中的渲染“$missing_item.Deposito
1条答案
按热度按时间r6l8ljro1#
编辑：
根据我的理解，您尝试从
v-for调用方法。在本例中，只需从循环中添加参数：原始答案
不需要额外的函数，Vue可以在类绑定内部处理此问题（参见文档）。
在您的示例中，它可能如下所示：
虽然这是可行的，但“Vue方式”是将其与计算属性结合使用，如下所示：
第一次
如果您希望使用switch case而不是简短形式，则可以将switch case函数插入到computed属性中并返回最终结果。