Need to change colour based on data. My class:getColor() is not working correct-CodePudding

In datatable there are two column status and priority. STATUS LIST are OPEN or CLOSED and PRIORITY LIST are HIGH,MODERATE and LOW.So, if status is open it should be in red colour, closed then green and in priority column if priority is high then darkblue,Low - warning colour and Moderate- info colour.

[![enter image description here][1]][1]

For Status column colours are getting displayed but for priority column is not working.

HTML templete -

<v-data-table
  :headers="headers"
  :items="searchFilterArray"
  disable-pagination
  :hide-default-footer="true"
>
           
    <template v-slot:item.status="{ item }">
      <span :>
        {{ item.status }} // status can be open or closed
      </span>
    </template>
    <template v-slot:item.priority="{ item }">
      <span :>
        {{ item.priority }} // priority can be High,Moderate or Low
      </span>
    </template>
</v-data-table>

 methods: {
    getColor (status) {
      console.log('status is : ', status) // In console only open and closed are getting printed. Not sure why Low and High are not going as per screenshot.
      if (status === 'closed') return 'v-green font-weight-bold'
      else if (status === 'open') return 'v-error font-weight-bold'
      else if (status === 'High') return 'v-darkblue font-weight-bold'
      else if (status === 'Low') return 'v-warning font-weight-bold'
      else if (status === 'Moderate') return 'v-info font-weight-bold'
      else return 'v-secondary '
    },
 }

CodePudding user response：

You can pass an object, with your conditions in it :

getColor (status) {
    return {
      'v-green font-weight-bold': status === 'closed',
      'v-error font-weight-bold': status === 'open',
      'v-darkblue font-weight-bold': status === 'High',
      'v-warning font-weight-bold': status === 'Low',
      'v-info font-weight-bold': status === 'Moderate',
      // You perhaps need to be more specific with this one 
      // for example with a 
      // !['closed', 'open', 'High', 'Low', 'Moderate'].includes(status)
      'v-secondary': !status
    }
}

you don't need to have a if/else and return the correct classes yourself, vue will figure out which classes to put depending on the boolean value

However i don't think it's your issue, because it's seems your console.log does not output those values so your method is not called, perhaps a slot issue, is your slot actually used ?

Perhaps your column is not actually called priority and it does not work, even if your header says it's the priority column, the actual field on the object could be something else like order

If your field is actually priority.name you need to change your template :

<template v-slot:item.priority.name="{ item }">
  <span :>
    {{ item.priority.name }} // priority can be High,Moderate or Low
  </span>
</template>

What is happenning currently is that your slot does not match the field and is not called by vuetify.