小编Iri*_*eva的帖子

我是 Vue JS 的初学者，我正在尝试创建一个函数来为订单状态分配相应的颜色。我想使用 switch 语句来实现这一点，它将获取订单状态的值并将其传递给 getStatusColour 函数（），如下所示：

const getStatusColour = (orderStatus) => {
    let statusColour = "";
    switch (orderStatus) {
        case "new": 
            statusColour = "bg-green-100 text-green-900";
            break;
        case "preparing": 
            statusColour =  "bg-yellow-400 text-yellow-900";
            break;
        case "ready":
            statusColour = "bg-blue-200 text-blue-800";
            break;
        case "delivered":
            statusColour = "bg-green-300 text-green-800";
            break;
        case "failed": 
            statusColour = "bg-red-400 text-red-900";
            break;
        default:
            statusColour = "bg-gray-100 text-gray-800"
    }
    return statusColour;
}

然后在Index.vue我的文件中export default { getStatusColour }，我想这应该是一个错误。

然后在模板中我这样称呼它：

<span :class="getStatusColour(order.status)">{{ order.status }}</span>

但我不断收到 …