When using a datatable, there are two columns: status and priority. The STATUS LIST includes OPEN or CLOSED, while the PRIORITY LIST includes HIGH, MODERATE, and LOW. So, if the status is open, it should be displayed in red color; if closed, then in green. In the priority column, high priority should display in dark blue, low priority as warning color, and moderate priority as info color.
[![enter image description here][1]][1]
Currently, the colors for the Status column are displaying correctly, but the Priority column is not working as expected.
Here is the HTML template:
<v-data-table
:headers="headers"
:items="searchFilterArray"
disable-pagination
:hide-default-footer="true"
>
<template v-slot:item.status="{ item }">
<span :class="getColor(item.status)">
{{ item.status }} // status can be open or closed
</span>
</template>
<template v-slot:item.priority="{ item }">
<span :class="getColor(item.priority)">
{{ item.priority }} // priority can be High,Moderate or Low
</span>
</template>
</v-data-table>
methods: {
getColor (status) {
console.log('status is : ', status) // Only open and closed are printed in the console. Not sure why Low and High are not displaying as shown in the 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 '
},
}