Has anyone successfully implemented rendering an icon in a VDataTable column using slots with the latest Lab release of Vuetify3?
In Vuetify Version 2.x, it was achieved like this:
<template>
<v-data-table
:headers="headers"
:items="tableData"
:items-per-page="10"
>
<template #[`item.actions`]="{ item }">
<v-icon
icon="$magnifier"
style="color: #0692bc"
class="inline cursor-pointer mr-4"
@click="action(item)"
/>
</template>
</v-data-table>
</template>
<script>
export default {
data: () => ({
tableData: [
{
test_data: 123,
},
],
headers: [
{
title: 'Function',
key: 'actions',
sortable: false,
},
],
}),
methods: {
action(item) {
console.log(item.test_data);
},
},
};
</script>
This currently results in an empty column (no Errors or Warnings as it's not production-ready yet).
EDIT:
Just solved it! The header objects should now use key instead of value. So the headers should be:
headers: [
{
title: 'Function',
key: 'actions',
sortable: false,
},
],