How to change text color based conditional renderings in Vue Js?

Question

I want to change the text color to red if the date of visit is more than 3 working days. Let say the created date is 10th august 2022 and the date of visit is 6th august 2022 , the date of visit should be red in color. I did tried to use :style="{color:isColor}"for my date of visit but it will make every text into red color. Is there any computed function i can use for this particular situation?

<template v-slot:item.created_at="{ item }">
                <date-String format="MM/DD/YYYY HH:mm:ss" :value="item.created_at"/>
              </template>

  <template v-slot:item.date_of_visit="{ item }" >
                <date-String  format="MM/DD/YYYY" :value="item.date_of_visit"/>
              </template>

:style="fn(item.date_of_visit)" ... and have the method fn return the appropriate style - I'm surprised :style="{color:red}" worked actually - that should produce a warning Property "red" was accessed during render but is not defined on instance. unless you have some variable called red of course — Jaromanda X
– Jaromanda X, Commented Aug 10, 2022 at 8:31
:style="{color:isColor}" sorry , need to declare variable as red first. So i need to create a computed function for fn — Gavin Teo Juen
– Gavin Teo Juen, Commented Aug 10, 2022 at 8:41

Amaarockz · Accepted Answer · 2022-08-10 08:43:10Z

2

Have a computed Property like

computed: {
 setColor() {
  return (item) => {
    if(condition) {
       this.isColor = 'red';
    } else {
      this.isColor = 'blue';
    }
    return { color: this.isColor};
  }
 }
}

and call it as

:style="setColor(item)"

answered Aug 10, 2022 at 8:43

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change text color based conditional renderings in Vue Js?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related