Vue.js 在v-data-table中钻取对象sup属性

基本上，我需要传入一个对象作为v-data-table中所有列的值

例如，而不是：

{
    name: 'Ice cream sandwich',
    calories: 237,
    fat: 9.0,
    carbs: 37
}

我需要将其设置为“项目”中的示例项目：

我知道通过使用模板，我仍然可以只显示值，因为我只想显示值，而不想显示代码：

<div id="app">
    <v-app id="inspire">
        <v-data-table
            :headers="headers"
            :items="desserts"
            :page.sync="page"
            :items-per-page="itemsPerPage"
            hide-default-footer
            class="elevation-1"
            @page-count="pageCount = $event"
        >
            <template #item.calories="{item}">
                {{item.calories.value}}
            </template>
            <template #item.fat="{item}">
                {{item.fat.value}}
            </template>
            <template #item.carbs="{item}">
                {{item.carbs.value}}
            </template>
            <template #item.iron="{item}">
                {{item.iron.value}}
            </template>
        </v-data-table>
    </v-app>
</div>


<script>
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      page: 1,
      pageCount: 0,
      itemsPerPage: 10,
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories'},
        { text: 'Fat', value: 'fat'},
        { text: 'Carb', value: 'carbs'},
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: {value: 159, score: 'x' },
          fat: {value: 80, score: 'y' },
          carbs: {value: 22, score: 'z' },
        }
      ]
    }
  },
})
</script>

{{item.carries.value}
{{item.fat.value}
{{item.carbs.value}
{{item.iron.value}
新Vue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据（）{
返回{
页码：1，
页面计数：0，
项目页码：10，
标题：[
{
文字：“甜点（100克），
对齐：“左”，
可排序：false，
值：“名称”，
},
{文本：'卡路里'，值：'卡路里'}，
{text:'Fat'，value:'Fat'}，
{文本：'Carb'，值：'carbs'}，
],
甜点：[
{
名称：“冷冻酸奶”，
卡路里：{值：159，分数：'x'}，
fat:{值：80，分数：'y'}，
碳水化合物：{值：22，分数：'z'}，
}
]
}
},
})

---

我的问题是，我的表中有很多列，它们是动态的。（headers和items是从服务器动态生成的。）我不希望也生成大量（30+）这样的模板条件，但我现在真的看不到任何其他解决方案

您可以使用

标题

道具的

值

字段来进行此操作。Vuetify在此处接受属性路径：

标题：[
{
文字：“甜点（100克），
对齐：“左”，
可排序：false，
值：“名称”，
},
{text:'carries'，value:'carries.value'}，如果你没有找到你的解决方案，那么，再多描述一点，现在你传递了什么，然后是什么输出。之后你想要输出什么。
<div id="app">
    <v-app id="inspire">
        <v-data-table
            :headers="headers"
            :items="desserts"
            :page.sync="page"
            :items-per-page="itemsPerPage"
            hide-default-footer
            class="elevation-1"
            @page-count="pageCount = $event"
        >
            <template #item.calories="{item}">
                {{item.calories.value}}
            </template>
            <template #item.fat="{item}">
                {{item.fat.value}}
            </template>
            <template #item.carbs="{item}">
                {{item.carbs.value}}
            </template>
            <template #item.iron="{item}">
                {{item.iron.value}}
            </template>
        </v-data-table>
    </v-app>
</div>


<script>
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      page: 1,
      pageCount: 0,
      itemsPerPage: 10,
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories'},
        { text: 'Fat', value: 'fat'},
        { text: 'Carb', value: 'carbs'},
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: {value: 159, score: 'x' },
          fat: {value: 80, score: 'y' },
          carbs: {value: 22, score: 'z' },
        }
      ]
    }
  },
})
</script>