using table row @click event not working

jeimz173

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>
            <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>
            <q-td key="dispatcher" :props="props">{{ props.row.dispatcher.name }}</q-td>
            <q-td key="client" :props="props">{{ props.row.client.name }}</q-td>
            <q-td key="origin" :props="props">{{ props.row.origin.name +' ( '+ props.row.origin.code + ')' }}</q-td>
            <q-td key="destination" :props="props">{{ props.row.destination.name +' ( '+ props.row.destination.code + ')' }}</q-td>
            <q-td key="created_at" :props="props">{{ props.row.created_at }}</q-td>
          </q-tr>
          <q-tr v-show="props.expand" :props="props">
            <q-td colspan="100%">
              <div class="container">
              </div>
            </q-td>
          </q-tr>
        </template>

thank you in advance!

jeimz173

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 } })">

Joshua

To whomever else is researching this question,

https://github.com/quasarframework/quasar/commit/b7396aa296e0c83bdfb8d192464a2fe5457d7049

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

danilowm

@Joshua Thank You!!

Example:

<q-table
  title="TITLE"
  :data="data"
  :columns="columns"
  row-key="name"
  @row-click="onRowClick"

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

AlisonSandrade

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?

metalsadman

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

No More Posting New Topics!

using table row @click event not working