Multi conditional q-table row formatting.

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

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

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

    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.


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

  • Try :class="tableFormat(props)"


Log in to reply