title: How to display value from lookup table in vuetify data table
body: <pre><code>  &lt;v-data-table
      :headers=&quot;headers&quot;
      :items=&quot;desserts&quot;
    &gt;&lt;/v-data-table&gt;
  </code></pre>
  <p>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.</p>
  <p>Specifically, this means: In my items object &quot;desserts&quot;, one attribute does not contain the actual data to be displayed, but a foreign key to a lookup table.</p>
  <p>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.</p>
  <p>This is the data table items object:</p>
  <pre><code> items: [
          {
            category_id: 1,  # &lt;--- this is a foreign key to a lookup table
            name: 'Mousse au Chocolat',
            calories: 159,
          },
          {
            category_id: 2,  # &lt;--- this is a foreign key to a lookup table
            name: 'Ice cream sandwich',
            calories: 237,
          }
        ]
  </code></pre>
  <p>My lookup table data are also stored as json and look like this:</p>
  <pre><code> categories: [
          {
            id: 1,  # &lt;--- this is what category_id in the items object refers to
            name: 'Good Stuff',
          },
          {
            category: 2,  # &lt;--- this is what category_id in the items object refers to
            name: 'Cold Stuff',
          }
        ]
  </code></pre>
  <p>This is my headers object:</p>
  <pre><code>  headers: [
        { text: 'Category', value: 'category_id' },
        { text: 'Name', value: 'name' },
        { text: 'Calories', value: 'calories' },
      ],
  </code></pre>