Vuetifyのv-data-tableで表示されるデータを置き換え表示したい

Question

Vuetifyのv-data-tableで表示されるデータを置き換え表示したい

やりたいこと

ざっくりかつ公式のデータを借りてきての質問で大変恐縮ですが、分かる方がいらっしゃればご教示いただければと思います。

以下のコードはVuetify公式からお借りしたものにname_listsというデータが追加されています。
下の画像の赤枠の部分をname_listsの値(name_lists.beforeのものをname_lists.afterに)と差し替えて表示したいのですが、やり方が分かりません。
おそらく<template v-slot: item.groupnumber="props">など使用するのではと考え、{{country_dict.item.groupnumber}}などしてみましたが全く見当違いだったようです。

以上、よろしくおねがいいたします。

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>
</template>

<script>
  export default {
    data () {
      return {
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'start',
            sortable: false,
            value: 'name',
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' },
        ],
        desserts: [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%',
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%',
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%',
          },
          {
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: '8%',
          },
          {
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            iron: '16%',
          },
        ],
        name_lists: [
          { before: "Frozen Yogurt", after: "ヨーグルト"},
          { before: "Ice cream sandwich", after: "サンドイッチ"},
          { before: "Eclair", after: "エクレア"},
          { before: "Cupcake", after: "ケーキ"},
          { before: "Gingerbread", after: "ジンジャーブレッド"},
        ],
      }
    },
  }
</script>

Answer 1

自己解決

map する以下のような関数を追加し、処理したいタイミングで呼び出しました。

this.return_data = this.desserts.map(x => Object.assign(x, this.name_lists.find(y => y.before == x.name)));

関数を呼ぶと、return_dataは

{
  name: 'Frozen Yogurt',
  calories: 159,
  fat: 6.0,
  carbs: 24,
  protein: 4.0,
  iron: '1%',
  before: "Frozen Yogurt",
  after: "ヨーグルト"
},

このようなデータになるので、

表示側はheadersのvalueをnameからafterに変更すればOKです

..........
data () {
      return {
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'start',
            sortable: false,
            value: 'after',
          },
          { text: 'Calories', value: 'calories' },
          ..........