Vuetify - v-simple-checkbox prevents v-data-table row.click event

Question

When v-simple-checkbox is used in v-data-table, clicking on the checkbox or the area around it doesn't invoke row.click event.

This CodePen example shows selecting a data table row on row.click. However, if more columns with checkboxes are used it's almost impossible to select a row.

It seems like the .stop event handler is used inside v-simple-checkbox. Is there any way to trigger row.click event by clicking on that component?

jrcamatog jrcamatog · Accepted Answer · 2021-03-26T17:24:16

If the last column of checkboxes are just for display, you can just use a v-icon to render the correct checkbox icon.

<template v-slot:item.glutenfree="{ value }">
    <v-icon>
        {{ value ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline' }}
    </v-icon>
</template>

Vuetify - v-simple-checkbox prevents v-data-table row.click event

1 Answers