Change colour based on if condition

I have a few boxes and I would like to change there colour based on data from an api.

<div class="box a" id="box1">Temp</div>
<div class="box b" id="box2">Volume</div>

and the data (is being requested using webs sockets):

"data": {
   "ml": {
          "key": "mlTemp",
          "data": "1",
         },
         {
           "key": "mlVolume",
           "data": "3",
          }
        }
   }

For ex. if mlTemp is 1 I would like to change the colour of temp box to blue, if mlTemp is 2 I would like to change it to green etc. And same idea for mlVolume, if it is 1 I want to change it to yellow etc.

I’m currently able to change colour with conditional binding:

<template>
<div class="box a" id="box1" :class="{ updatedTemp: colourChange}">Temp</div>
<div class="box b" id="box2" :class="{ updatedVol: colourChange}">Volume</div>
</template>

<script>
computed: {
      colourChange() {
      return parseInt(this.ml["mlTemp"].data) = 0;
    },
</script>

<style>
.updatedTemp{
   backgroundColor:"pink"
}
</style>

but I’m not sure how to change colours if there are multiple conditions and with the data constantly updating.

What I am trying to do is something like:

computed: {
      colourChange() {
          if(parseInt(this.ml["mlTemp"].data == 0) {
             backgroundColor: "pink"
          }else if(parseInt(this.ml["mlTemp"].data == 1){
             backgroundColor: "blue"
          }
             .....
    },

Any ideas would be great, thanks so much!!

Beauty of computed properties is they don’t constantly change.
If you are super worried about performance after you load the data from the api, you could represent it in your code. For example, after the content is loaded (then chain, async await, your choice). After it gets loaded in, checks the data then makes its decision.

Otherwise, computed properties. If you have many different data states, then use a big case statement and have it RETURN the color you want. (If it’s a few, elseifs work better, but case can make it a lot easier to read if you have many many values). Then simply set the class
:class="`style:${computedColor};`" (backticks btw)

Again, don’t be worried about performance with computed properties. Read Computed Properties and Watchers — Vue.js
Computed properties will not update themselves as long as the reactive properties inside them do not change their state.

Make sure in your computed properties you are returning a value, rather than setting the value of something else. This way you can call the computed value in your html template directly. Also computed properties you are supposed to return the value. ex:

if(parseInt(this.ml["mlTemp"].data == 0) {
     return "backgroundColor: pink;"
}
1 Like

Thanks so much for your reply and detailed explanation!
I restructured my computed property like:

colourChange(){
      if(parseInt(this.ml["mlTemp"].data) === 0){
        return "backgroundColor: pink;"
      }else if(parseInt(this.ml["mlTemp"].data) === 1){
          return "backgroundColor: green;"
      }else if(parseInt(this.ml["mlTemp"].data) === 2){
          return "backgroundColor: yellow;"
      }else{
           return "backgroundColor: white;"
      }
    }

which worked!

I’m also wondering what if the data changes, for ex. this.ml["mlTemp"].data gets updated every few seconds via websockets. Would a watcher be better for this case? Or can the computed property update without reloading the page?

^ I already answered this question

1 Like