I am working with the dataTables example with the ability to check a box in a row. I added an onRowClick function to pull up the detail of each row in a modal. That onRowClick is killing the function of clicking the box in the indvidual row. If I add a button to a slot, I can call a namedAction to launch the modal. However, the function is not grabbing the individual row to show in the modal. in the namedAction, I have “function”: “action.options.query.id = action.options.params.row.id”, yet that is not grabbing the record and passing it to the modal window. am I missing something?
Ok, so what is happening here is that the HTML slot icon is sitting on top of the whole row.
Both items have event listeners and both react to the click event. This is called propagation. To stop propagation you can add a .stop onto the click handler, something like :
@click.stop="namedAction('doSomething',{})"
--------^
Reference: https://vuejs.org/v2/guide/events.html#Event-Modifiers
Also I think there is a row with check example
If you want to use a separate button for your detail eg a ‘>’ then in the named action set the second argument to {row:row} and the row will be added to the options
The row is exposed to the custom HTML in slots.