Onclick event on q-table stop working after passing props to template

Question

I got this table I want to color each row in a color depending on my data. This works but seems to disable my onclick event in q-table for some reason. @row-click="onRowClick"

I cannot figure out why this is happening. Im new to quasar and to be honest Im not 100% sure how this referens works v-slot:body="props"

Eventually I want this to be a router event taking me to a different page on click.

<div id="q-app">
  <div class="q-pa-md">
    <q-table
        :data="data"
        :columns="columns"
        row-key="id"
        :filter="filter"
        :loading="loading"
        :rows-per-page-options="[5]"
        @row-click="onRowClick"
    >
<!-- If I remove the template here the onRowClick works     -->
        <template v-slot:body="props">
          <q-tr :props="props" :class="tableFormat(props.row)">
            <q-td v-for="col in props.cols" :key="col.name" :props="props">{{
              col.value
            }}</q-td>
          </q-tr>
        </template>
    </q-table>
  </div>
</div>

CSS:

.marked-row {
  background-color: green;
}
.unmarked-row {
  background-color: blue;
}

new Vue({
  el: '#q-app',
  data () {
    return {
      loading: false,
      filter: "",
      rowCount: 10,
        columns: [
        {
          name: "name",
          required: true,
          label: "Name",
          align: "left",
          field: "name",
          // format: val => `${val}`,
          sortable: true
          // style: 'width: 500px'
        },
        {
          name: "age",
          required: true,
          label: "Age",
          align: "left",
          field: "age",
          format: val => `${val}`,
          sortable: true
        },
        {
          name: "location",
          required: true,
          label: "Location",
          align: "left",
          field: "location",
          format: val => `${val}`,
          sortable: true
        }
      ],
      data: [
        {
          id: 1,
          name: "Diana", 
          age: 5,
          location: "Mumbai",
          color: "blue"
        },
        {
          id: 2,
          name: "Billy",
          age: 4,
          location: "Detroit",
          color: "green"
        },
        {
          id: 3,
          name: "Mimmi",
          age: 3,
          location: "New York",
          color: "green"
        },
        {
          id: 4,
          name: "Bengan",
          age: 4,
          location: "Dubai",
          color: "blue"
        },
        {
          id: 5,
          name: "Chloe",
          age: 7,
          location: "Paris",
          color: "green"
        },
        {
          id: 6,
          name: "Ben",
          age: 6,
          location: "Los Angeles",
          color: "blue"
        }
      ]
    }
  },

 methods: {
    tableFormat(val) {
      console.log(val)
      if (val.color === "blue") {
        return "marked-row";
      } else {
        return "unmarked-row";
      }
    },
    onRowClick(evt, row) {
      console.log("clicked on ", row );
    }
  }
})

Here is my pen: https://codepen.io/haangglide/pen/MWeRaJW

Answer 1

Doc says

Emitted when user clicks/taps on a row; Is not emitted when using body/row/item scoped slots

So you can use @click event on q-tr

codepen - https://codepen.io/Pratik__007/pen/oNLOogY