Is there a way to prevent the emit from the click on the DataTable row if I have also clicked on the Button inside the slot? I've seen this done with native components using @click.prevent
, but I'm not sure how to achieve the same functionality with Vue components and emits.
<template>
<DataTable @click="handleRowClick">
<template v-slot:action="{ row }">
<Button @click="handleButtonClick">
Button
</Button>
</template>
</DataTable>
</template>
<script>
export default {
components: {
DataTable,
Button
},
methods: {
handleRowClick(){
console.log("Redirect only when the table row is clicked");
},
handleButtonClick(){
console.log("Perform an action when the button inside the table component slot is clicked, without redirecting");
}
}
}
</script>