如何动态更改数组中的css颜色

我想让数据返回到数组中，并根据其“已解决”“正在工作”或“打开”更改颜色当前代码正在工作但只有一种颜色，控制台日志显示其返回为已解决，但我猜它只是显示数组中的最后一个，而不是循环，我尝试在计算机中创建一个for循环，但没有任何更改。我有一种感觉，我忽略了一些小而愚蠢的细节。它的主要功能是按我所希望的那样工作，这只是我正在努力使用的css。如果您能提供任何帮助，我将不胜感激。我发现onclick有大量的v-bind信息，但数组中的动态值没有

<template>
<div
              class="card-content has-background-dark has-text-light"
              id="ev-card"
              v-for="item in p3data.slice(0, 19)"
              :key="item.p3data"
              :class="cardColor"
            >
</div>
</template>

数据（）{
返回{
p3data:[]，
地位：“，
};
},
计算：{
cardColor:function（）{
var color=“”；
如果（this.status==“已解决”）{
color=“绿色”；
}else if（this.status==“正在工作”）{
color=“黄色”；
}else if（this.status==“打开”）{
color=“红色”；
}否则{
color=“红色”；
}
返回颜色；
}
},
创建（）{
var p3=“一些url”；
获取（p3）。然后（响应=>{
//从api中提取信息以显示在数组中
this.p3data=response.data；
//console.log（response.data）；
//显示父数组的长度
var updateInfo=response.data；
for（updateInfo的变量项）{
var updateData=item.updates；
var uLength=更新数据长度；
uLength=uLength-1；
对于（var i=0；i

瑞德先生{
边界：4倍固体hsl（0,94%，51%）；
}
黄先生{
边界：4倍固体hsl（54,76%，54%）；
}
格林先生{
边界：4倍固体hsl（115,81%，35%）；
}

我不知道vue是如何工作的，也不知道您想要实现什么。如果我错了，请纠正我，但您正在尝试使用多张不同颜色的卡，对吗？如果是这样，您似乎只在状态中保存了一个值，我认为它可能起作用的是将cardColor功能作为该项的属性。并且具有以下内容：class=“item.cardColor（）”它将基于当前状态返回其类。

问题是，您的计算属性cardColor仅根据this.status的值进行更改，this.status是特定于此组件的单个变量。在代码中，在执行axios调用后，循环所有项，然后执行

this.status=item.updatekind

它使用item.updatekind设置状态，其中item是循环中的最后一个元素。这是用于设置cardColor属性的状态值

您需要的是计算每个项目的cardColor。有几种方法可以做到这一点，我认为最简单的方法是在现有代码中进行计算，如下所示：

if (item.updatekind == 3) {
  item.updatekind = "Resolved";
  item.cardColor = "green";
} else if (item.updatekind == 2) {
  item.updatekind = "Working";
  item.cardColor = "yellow";
} else {
  item.updatekind = "Open";
  item.cardColor = "red";
}

然后在模板中，您可以执行以下操作

<template>
  <div
        class="card-content has-background-dark has-text-light"
        id="ev-card"
        v-for="item in p3data.slice(0, 19)"
        :key="item.p3data"
        :class="item.cardColor"
        >
  </div>
</template>

如果不想更改promise中的代码，也可以使用条件类

<template>
  <div
    class="card-content has-background-dark has-text-light"
    id="ev-card"
    v-for="item in p3data.slice(0, 19)"
    :key="item.p3data"
    :class="{
      'green': item.updatekind === 'Resolved',
      'yellow': item.updatekind === 'Working',
      'red': item.updatekind === 'Open'       
    }"
  ></div>
</template>

我想这取决于你的个人喜好

---

谢谢，

你真是太棒了！我做到了，也谢谢你的解释，我才进去3周，所以我还在掌握逻辑。没问题。我喜欢Vue，你也会喜欢的！

<template>
  <div
        class="card-content has-background-dark has-text-light"
        id="ev-card"
        v-for="item in p3data.slice(0, 19)"
        :key="item.p3data"
        :class="item.cardColor"
        >
  </div>
</template>

<template>
  <div
    class="card-content has-background-dark has-text-light"
    id="ev-card"
    v-for="item in p3data.slice(0, 19)"
    :key="item.p3data"
    :class="{
      'green': item.updatekind === 'Resolved',
      'yellow': item.updatekind === 'Working',
      'red': item.updatekind === 'Open'       
    }"
  ></div>
</template>