Q-table with colorful q-badge

[Kate]

Hey there, I want to make a column with colored q-badge items. For example: warning, error, info and etc. I tried with if:

      <template v-slot:body-cell-name="props">
        <div class="table-trace-row">
          {{ props.row.trace }}
        </div>
      </template>
      <template v-slot:body-cell-logLabel="props">
        <div class="flex flex-center">
          <q-tr :props="props">
            <q-badge :class="myTrClass(props)">
              {{ props.row.logLabel }}
            </q-badge>
          </q-tr>
        </div>
      </template>
    ...

   methods: {
      myTrClass(props) {
        if (props.row.logLabel === 'TRACE') {
          return 'bg-grey-3'
        }
        if (props.row.logLabel === 'WARNING') {
          return 'bg-warning'
        }
        if (props.row.logLabel === 'ERROR') {
          return 'bg-red'
        }
        if (props.row.logLabel === 'DEBUG') {
          return 'bg-green'
        }
        if (props.row.logLabel === 'INFO') {
          return 'bg-purple'
        }
      }
    }

Yes, it is working but I would like to go through the cycle and write a better option, more concise, shorter. Tell me please, what are the more convenient versions of this task?

[metalsadman]

@Kate use an object literal. ie.

...
  <q-badge :color="myTrClass(props.row.logLabel)">
     {{ props.row.logLabel }}
   </q-badge>
 ...

const color = col => ({
          'TRACE': 'grey-3',
          'WARNING': 'warning',
          'ERROR': 'red',
          'DEBUG': 'green',
          'INFO': 'purple'
        }[col])
...
myTrClass(logLabel) {
  return color(logLabel)
}

[Kate]

@metalsadman Thank you very much! It is working.