Quasar: QTd scope-slot props not available for QBtn click event callback method

[realcarbonneau]

Software version

Quasar: 0.15
OS:
Node:
NPM:
Browsers:
iOS:
Android:
Any other software related to your bug:

What did you get as the error?

When using a QBtn click event callback method within a QTd, the slot-scope props are not available as parameters, nor in the scope. Other alternatives, such as inline javascript in the @click="" or forcing props cause the loss of the done() callback function for the QBtn.

The errors displayed in the console log are as follows for others doing searches on this:
Error in event handler for "click": "TypeError: Cannot read property 'row' of undefined"
TypeError: Cannot read property 'row' of undefined

This is a typical use case to have buttons within a table cell wich require access to the row information.

<q-td slot="body-cell-actions" slot-scope="props" :props="props">
  <q-btn icon="edit" @click="edit" />
</q-td>

md5-3dc73f106be1be41f0399084903c68c9



<q-btn icon="edit" @click="this.$router.push({ path: '/edit/' + props.row.id })" />



md5-ff50ef9a5934f1793711cdc34bf7202e



<q-btn icon="edit" @click="edit(props)" />



md5-e15f9a7db2ee6c651056734d87309cfd





md5-e1d2287a27e81eea40c105638110628b

What were you expecting?

To have access to the slot-scope props in the QBtn click event callback method

What steps did you take, to get the error?

[rstoenescu]

Hi, you need to first understand how Vue works and the scope of variables in both Vue components & ES6.

Here is what you want to achieve:

<q-td slot="body-cell-actions" slot-scope="props" :props="props">
  <q-btn loader icon="edit" @click="($event, done) => { edit(done, props) }" />
</q-td>

Explanation: you need to access props, so creating an anonymous arrow function (acting as proxy) to feed the click event in the scope where props is defined.

It might look cumbersome, but it's how you can do it in Vue. This has nothing to do with Quasar anyway.

[realcarbonneau]

Ok, thank you. I have added an example to the table demo and submitted the pull request #1406