[Vuejs]-Blink or flash text on update of data from websocket

by

1👍

✅

You have multiple options, depending on what you eventually decide the effect to be.

Here is the simplest solution. Use a watcher on the computed getter and a conditional class to style your values.

data: {
  myValue: {
    prev: 150,
    latest: 100
  }
},
computed: {
  valueInStore() {
    return this.$store.getters.value
  }
},
watch: {
  valueInStore(newValue, oldValue) {
    this.myValue.prev = oldValue
    this.myValue.latest = newValue
  }
}

To display the correct css class you then 

<div :class="getColorClass(myValye)">{{ myValue.latest }}</div>

...

methods: {
  // method instead of computed since you were talking about multiple values
  getColorClass(foo) {
    return this.myValue.prev < this.myValue.latest ? 'green' : 'red'
  },
}

Depending on your needs you might need do adjust for the prev == latest case.

Now you can use any css styles or animations you want in the .green and .red classes.

👤TommyF

Leave a comment