using table row @click event not working

  • Hi i am trying to add some @click event on every table rows of my data table please help me.
    here is what i did:

    <template slot="body" slot-scope="props" :props="props" class="cursor-pointer" @click.native="alert('test not working')">
              <q-tr :props="props" >
                <q-td auto-width>
                  <q-checkbox color="primary" v-model="props.selected" />
                <q-td key="vehicle" :props="props">
                  <q-checkbox color="primary" v-model="props.expand" checked-icon="remove" unchecked-icon="add" class="q-mr-md" />
                  {{ props.row.vehicle.plateNumber }}
                <q-td key="dispatcher" :props="props">{{ }}</q-td>
                <q-td key="client" :props="props">{{ }}</q-td>
                <q-td key="origin" :props="props">{{ +' ( '+ props.row.origin.code + ')' }}</q-td>
                <q-td key="destination" :props="props">{{ +' ( '+ props.row.destination.code + ')' }}</q-td>
                <q-td key="created_at" :props="props">{{ props.row.created_at }}</q-td>
              <q-tr v-show="props.expand" :props="props">
                <q-td colspan="100%">
                  <div class="container">

    thank you in advance!

  • whoops! i fixed it thank you!

    this what i did 🙂

    <template slot="body" slot-scope="props" :props="props">
              <q-tr :props="props" class="cursor-pointer" @click.native="$router.push({ path: '/user/trips', query: { tripId: props.row._id } })">

  • To whomever else is researching this question,

    As of v1.2.6 you can add a @row-click to q-table.

  • @Joshua Thank You!!


    methods: {
        onRowClick (evt, row) {
          console.log('clicked on', evt, row)

  • The q-table @row-click method worked for me, however, I found a problem with the event when using a q-btn-dropdown on the same line.

    If you use a q-btn-dropdown on the clicked line the @row-click event is triggered when the button is clicked and if you place an @row-click.prevent the q-btn-dropdown works correctly, but the @row-click event loses the expected behavior and no longer brings the object of the clicked line.

    Any solution?

  • @AlisonSandrade it’s not the row-click that you prevent, it’s the q-btndropdown’s @click event ie. @click.stop.

Log in to reply