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>
                <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!



  • 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,

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

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



  • @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)
        }
      }
    

Log in to reply