expanded-item not triggering events - vuetify.js

Question

I'm currently having the problem that when the checkboxes in the expanded-item slot are clicked, these do not change their value.
I have also tried using the directive #click, but this also didn't trigger the checkbox to change its value.
<template>
<v-data-table
:headers="headers"
:items="items"
show-expand
single-expand
>
<template v-slot:expanded-item="{ item, headers }">
<td :colspan="headers.length">
<v-row v-for="(cs, index) in item.c" :key="index">
<v-simple-checkbox
v-model="cs.selected"
:ripple="false"
>
</v-simple-checkbox>
</v-row>
</td>
</template>
</v-data-table>
</template>
<script>
export default {
data() {
return {
headers: [
{
text: 'A',
align: 'center',
sortable: false,
value: 'a'
},
{
text: 'B',
align: 'center',
sortable: false,
value: 'b'
}
],
items: [
{ a: 'my A', b: 'my B', c: [false, false] },
{ a: 'my A', b: 'my B', c: [false, false] }
]
}
}
}
</script>
Link to reproduction: https://codesandbox.io/s/vuetify-playground-forked-1omj9p?file=/src/layout.vue

Answer 1

If I understand correctly, you want to select the checkboxes of expanded panel after clicking them. Please see if this is what you are looking for. You also need to give a unique field for each row in items so that selecting checkboxes works ( I have added id field here). Once we click the button, selected checkboxes id can be captured (check console.log).
Link https://codesandbox.io/s/vuetify-playground-forked-6u5wry
<template>
<v-app>
<v-main>
<v-data-table
:headers="headers"
:items="items"
show-expand
single-expand
>
<template v-slot:expanded-item="{ item, headers }">
<td :colspan="headers.length">
<v-data-table
:headers="headers"
:items="items"
class="elevation-1"
v-model="selected"
show-select
item-key="id"
:hide-default-header="true"
:hide-default-footer="true"
:footer-props="{ itemsPerPageOptions: [-1] }"
>
</v-data-table>
</td>
</template>
</v-data-table>
<v-btn
small
color="blue darken-4"
rounded
dark
#click.prevent="selectcheckbox"
>Check Selected</v-btn
>
</v-main>
</v-app>
</template>
<script>
export default {
components: {
//MyDialog: () => import('./features/dialog.vue'),
//MyTabs: () => import('./features/tabs'),
//DatePicker: () => import('./features/date-picker.vue')
},
data() {
return {
selected: [],
headers: [
{
text: 'A',
align: 'center',
sortable: false,
value: 'a'
},
{
text: 'B',
align: 'center',
sortable: false,
value: 'b'
}
],
items: [
{ id: 1, a: 'my A', b: 'my B', c: [false, false] },
{ id: 2, a: 'my A', b: 'my B', c: [false, false] }
]
}
},
methods: {
selectcheckbox() {
console.log('selected checkboxes', this.selected)
}
}
}
</script>
<style>
.b1,
[b1] {
border: 1px dashed red;
}
.h-100 {
height: 100%;
}
.w-100 {
width: 100%;
}
::-webkit-scrollbar {
display: none;
}
.v-btn,
.v-tabs__item {
text-transform: none !important;
}
</style>