How to display value from lookup table in vuetify data table - vue.js

Question

<v-data-table
:headers="headers"
:items="desserts"
></v-data-table>
I am trying to display in a column of the table not the values from the items object, but a value which I get from a lookup table via reference key.
Specifically, this means: In my items object "desserts", one attribute does not contain the actual data to be displayed, but a foreign key to a lookup table.
I know that with slots you can manipulate certain values to be displayed. But how to do this most efficiently with a lookup table I don't know. Thank you very much for direction.
This is the data table items object:
items: [
{
category_id: 1, # <--- this is a foreign key to a lookup table
name: 'Mousse au Chocolat',
calories: 159,
},
{
category_id: 2, # <--- this is a foreign key to a lookup table
name: 'Ice cream sandwich',
calories: 237,
}
]
My lookup table data are also stored as json and look like this:
categories: [
{
id: 1, # <--- this is what category_id in the items object refers to
name: 'Good Stuff',
},
{
category: 2, # <--- this is what category_id in the items object refers to
name: 'Cold Stuff',
}
]
This is my headers object:
headers: [
{ text: 'Category', value: 'category_id' },
{ text: 'Name', value: 'name' },
{ text: 'Calories', value: 'calories' },
],

Answer 1

You can use template to display any value you want :
<v-data-table
:headers="headers"
:items="desserts"
>
<template #item.category_id={ item }>
<!-- here get your value from your other json -->
{{ this.categories.find(x => x.category === item.category_id)?.name }}
</template>
</v-data-table>
If you want to make it cleaner you can use a function to get your value.
Here : #item.category_id={ item }, category is the header value