Changing text color with a function in vue

Question

I have this line

<th style="text-align: center; color: cycleTimeColorStat([S5MachLive,70])" {{ S5MachLive }} </th>

Where {{ S5MachLive }} is my shown value cycleTimeColorStat is this function

cycleTimeColorStat(time, num) {
      try {
        if (time !== 0) {
          return "yellow";
        } else {
          if (time < num) return "green";
          else {
            return "red";
          }
        }
      } catch (error) {
        return "yellow";
      }
    },

What I'm trying to do is call the function to evaluate for color and then return the color and render the value in that color

omerS · Accepted Answer · 2021-06-25 10:12:56Z

A simple solution: You can bind a class to your th element and make a method to change it's class.

<th :class="changeColor(S5MachLive,70)" > {{ S5MachLive }} </th>

<script>

export default {
  methods: {
    changeColor(time, num) {
      try {
        if (time !== 0) {
          return "yellow";
        } else {
          if (time < num) return "green";
          else {
            return "red";
          }
        }
      } catch (error) {
        return "yellow";
      }
    }
  }
};
</script>

<style scoped>

.yellow {
  color: yellow;
}

.green {
  color:green;
}

.red {
  color: red;
}

</style>

MaBbKhawaja · Accepted Answer · 2021-06-25 11:52:36Z

Just add your function into computed lifecycle hook and it will solve the problem

<th style="text-align: center; color: cycleTimeColorStat([S5MachLive,70])" {{ S5MachLive }} </th>

<script>

export default {
  computed: {
    changeColor(time, num) {
      try {
        if (time !== 0) {
          return "yellow";
        } else {
          if (time < num) return "green";
          else {
            return "red";
          }
        }
      } catch (error) {
        return "yellow";
      }
    }
  }
};
</script>

<style scoped>

</style>

Collectives™ on Stack Overflow

Changing text color with a function in vue

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related