Warning in the console output when using the Vuetify v-data-table component

Question

I am using the Vuetify v-data-table component. Here it is:

<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>

Here are my headers:

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

And I am getting the next warning in the console:

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

I can translate but I can not understand exactly - what should I do in my code?

ndpu · Accepted Answer · 2018-02-28 11:46:58Z

6

Just as warning message says: headers must have a value property (key name in items objects list):

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

answered Feb 28, 2018 at 11:46

ndpu

22.6k6 gold badges62 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cetor007 · Accepted Answer · 2018-03-14 16:41:17Z

0

Here is a issue, for replicate go in: https://codepen.io/cetor007/pen/mxexWp?editors=1011

the issue happens, in this case. items[]-> requered an attribute with name (name) and if name have the same (value) selected all values that have same value.

answered Mar 14, 2018 at 16:41

cetor007

1

Collectives™ on Stack Overflow

Warning in the console output when using the Vuetify v-data-table component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related