Multi conditional q-table row formatting.

[atpim]

I want to format q-table using multiconditions for rows:

<q-table
    :title="'Exposure Data for Loan ID: ' + selectedID + ' [' + valuationCurrency + ']'"
    :data="TableData"
    :columns="TableCols"
    row-key="Name"
    hide-bottom
    class="col-9 valuation-exposure-table"
    style="margin: 0 auto;"
    :pagination.sync="pagination"
  >
    <template v-slot:body="props">
      <q-tr :props="props" :class="tableFormat">
        <q-td v-for="col in props.cols" :key="col.name" :props="props">{{ col.value }}</q-td>
      </q-tr>
    </template>
  </q-table>

However when I assign tableFormat class I get error:
TypeError: Cannot read property 'row' of undefined

So here is my computed class with my multiple conditions

tableFormat() {
      if (
        this.props.row.Name === "Scheduled CF to equity before costs" ||
        this.props.row.Name ===
          "Scheduled CF to equity after servicing and funding" ||
        this.props.row.Name === "Expected CF to equity" ||
        this.props.row.Name === "Present value equity"
      ) {
        return "text-bold";
      } else if (
        this.props.row.Name === "Inputs used" ||
        this.props.row.Name === "Outstanding balance" ||
        this.props.row.Name === "Cash flows payments"
      ) {
        return "bg-accent text-white text-subtitle2";
      } else {
        return "bg-white text-black";
      }
    },

[s.molinari]

1. Don’t use text like that as your row name. It’s not robust.
2. You need to pass your props into your computed.

Scott

[atpim]

@s-molinari
How should I pass it to props?

[s.molinari]

Try :class="tableFormat(props)"

Scott