使用 Vuetify v-data-table 组件时控制台输出中的警告答案

【问题标题】：Warning in the console output when using the Vuetify v-data-table component使用 Vuetify v-data-table 组件时控制台输出中的警告
【发布时间】：2018-08-08 06:46:59
【问题描述】：

我正在使用 Vuetify v-data-table 组件。这里是：

<template>
  <div>
    <v-data-table
      :headers="tableHeaders"
      :items="items"
      hide-actions
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td>{{ props.item.created_at }}</td>
        <td>{{ props.item.updated_at }}</td>
      </template>
    </v-data-table>
    <AddPlanButton/>
  </div>
</template>

这是我的标题：

data () {
  return {
    items: [],
    tableHeaders: [
      { text: 'Name' },
      { text: 'Created at' },
      { text: 'Updated at' }
    ]
  }
},

我在控制台中收到下一个警告：

[Vuetify] Headers must have a value property that corresponds to a value in the v-model array in "v-data-table"

我可以翻译但我不能完全理解 - 我应该在我的代码中做什么？

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

正如警告消息所说：标头必须具有value 属性（items 对象列表中的键名）：

tableHeaders: [
  { text: 'Name', value: 'name_key_name' },
  { text: 'Created at', value: 'created_key_name' },
  { text: 'Updated at', value: 'updated_key_name' }
]

【讨论】：

【解决方案2】：

这里有个问题，复制进去：https://codepen.io/cetor007/pen/mxexWp?editors=1011

在这种情况下，问题发生了。 items[]-> 请求具有名称（名称）的属性，如果名称具有相同（值），则选择所有具有相同值的值。

【讨论】：