CODEWITHSUNDEEP
quasar
Yusuf ÇAKIRCA
Yusuf ÇAKIRCA

Reputation: 191

Quasar QTable Clicking an action button on clickable row

I am using quasar framework for my project and I have a problem on qtable component. I made table rows clickable by @row-click event. That's works fine but I have some action buttons cell on my table and when I click any action button, first @row-click event triggered.. I need to give an exception acitons body cell.. How can I do that?

Upvotes: 4

Views: 11334

Answers (3)

Yusuf ÇAKIRCA
Yusuf ÇAKIRCA

Reputation: 191

I found the solution for my problem with method below; 

 <q-table :data="listProjects(this.$route.params.id)" :columns="columns" row-key="id" @row-click="rowClicker" selection="multiple" :selected.sync="selectedItems">



rowClicker (e, row) {
  if (e.target.nodeName === 'TD') {
    this.$router.push('project/parts/' + row.id)
  }
}

All clicks come from TD element except my button's click. If it is triggered by TD element it will route, if not it will not.

Upvotes: 3

DJ26
DJ26

Reputation: 21

Type Below Code WhereEver you Want to Stop the click Action.

<q-btn v-on:click.stop="onClickFunction"/>

This code will cause Click event to stop the parent click function and run it's own Click Function Specified on that Component

Upvotes: 2

Pratik Patel
Pratik Patel

Reputation: 6978

You can use .stop on click and it will only trigger the button click event of actions.

<q-btn icon="info" @click.stop="btnclick" dense flat/>

Example : -

<q-table
  title="Treats"
  :data="data"
  :columns="columns"
  row-key="name" 
  @row-click="onRowClick"
>
  <template v-slot:body-cell-name="props">
    <q-td :props="props">
      <div>
        <q-badge color="purple" :label="props.value"></q-badge>
        <q-btn icon="info" @click.stop="btnclick" dense flat/>
      </div>
    </q-td>
  </template>
</q-table>

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

Upvotes: 7

Related Questions