Как динамически изменить css цветов в массиве

Question

Я хочу, чтобы данные возвращались в массив и меняли цвета в зависимости от того, работает ли «разрешенный», «работающий» или «открытый» текущий код, но имеет только один цвет, консольный журнал показывает, что он возвращается как решено, но я предполагаю, что он просто показывает последний в массиве, а не циклически, я попытался создать для l oop в вычисленном и без изменений. У меня ощущение, что это какая-то маленькая глупая деталь, которую я пропускаю. Основная функция работает так, как я хочу, просто с ней борется css. Буду признателен за любую помощь, я нашел тонну v-bind информации для onclick, но не для динамических c значений в массиве.

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

<script>
  data() {
    return {
      p3data: [],
      status: "",
    };
  },

computed: {

    cardColor: function() {
      var color = "";
      if (this.status == "Resolved") {
        color = "green";

      } else if (this.status == "Working") {
        color = "yellow";

      } else if (this.status == "Open") {
        color = "red";

      } else {
        color = "red";

      }
      return color;

    }
  },

created() {
    var p3 = "some url";
    axios.get(p3).then(response => {
      // pulls the info from the api to display in an array
      this.p3data = response.data;
      // console.log(response.data);
      // shows the parent arrays length
      var updateInfo = response.data;

      for (var item of updateInfo) {
        var updateData = item.updates;
        var uLength = updateData.length;
        uLength = uLength - 1;
        for (var i = 0; i < updateData.length; i++) {
          // console.log(utem)
          if (updateData[i].message === "") {
            updateData[i].message = item.message;
            continue;
          } else {
          }
        }
        item.message = updateData[uLength].message;
        item.updatekind = updateData[uLength].updatekind;


        if (item.updatekind == 3) {
          item.updatekind = "Resolved";
        } else if (item.updatekind == 2) {
          item.updatekind = "Working";
        } else if (item.updatekind == 1) {
          item.updatekind = "Open";
        } else {
          item.updatekind = "Open";
        }


      }
        this.status = item.updatekind;
</script>

<style>
.red {
  border: 4px solid hsl(0, 94%, 51%);
}
.yellow {
  border: 4px solid hsl(54, 76%, 54%);
}
.green {
  border: 4px solid hsl(115, 81%, 35%);
}
</style>

Answer 1

проблема в том, что ваше вычисляемое свойство cardColor изменяется только в зависимости от значения this.status, которое является единственной переменной, указывающей c для этого компонента. В вашем коде после того, как вы выполните вызов ax ios, l oop будет проходить через все элементы, а после этого вы делаете this.status = item.updatekind, который устанавливает статус item.updatekind, где item - последний элемент в l oop , И это значение состояния, которое используется для установки свойства 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>

Если вы не хотите изменять код в обещании, вы также можете использовать условные классы.

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

Полагаю, это зависит только от ваших личных предпочтений.

Спасибо

Answer 2

Я не знаю, как работает vue, и чего вы пытаетесь достичь. Поправьте меня, если я ошибаюсь, но вы пытаетесь иметь несколько карт разных цветов, верно? Если это так, то кажется, что вы сохраняете только одно значение в статусе, и я думаю, что это может сработать, если бы у вас была функция cardColor в качестве свойства элемента. И иметь что-то вроде: class = "item.cardColor ()", которая будет возвращать свой класс в текущем состоянии.