Vuetify data-table @input event not fired when individual row is selected

Question

I want to create my own table component by using vuetify's data-table component.

Here is a sandbox for the work I did: https://codesandbox.io/s/my2mvroxlj

Basically SampleTable is a wrapper for Vuetify's data-table. In that table component, I want to make the items selectable. I was able to get the checkboxes rendered, using the select-all prop. I am using the items slot to render the checkboxes for each row.

The problem I am facing is that when user selects a checkbox, the input event is not getting fired(See console for a message) But, if the checkbox in the header is selected/de-selected, the input event is fired properly.

I don't know why this is happening. Please help in finding the issue in my code.

Answer 1

The problem was that when wrapping vuetify components and using scoped slots, sending the item and selected separately does not work. So, the whole props needs to be sent to the parent component.

In the updated code, I used slotProps attribute that sends props from child to parent. This way, when checkbox state is changed in the parent, it gets propogated to the child component and the input event gets fired.

Here's the code that works correctly: https://codesandbox.io/s/vue-template-5okdy