How to display value from lookup table in vuetify data table

March 18, 2022

  <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' },
    ],

>Solution :

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