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

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>

CodePudding user response：

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