Search code examples
quasar

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?

Solution

  • 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