Vuetify data-table

Question

У меня есть следующий код:

<v-app>
  <v-content>
    <v-container fluid full-height>
      <v-layout row wrap>
        <v-flex xs12>
          <v-data-table
            hide-actions
            :headers='headers'
            :items='items'
            class='elevation-1'
          ></v-data-table>
        </v-flex>
      </v-layout>
    </v-container>
  </v-content>
</v-app>

в разделе сценария:

data: {
headers: [
      {text: 'Name', value: 'name'},
    {text: 'Age', value: 'age'}
  ],
  items: [
      {
      name: 'John',
      age: 30
    }
  ]
}

https://jsfiddle.net/eywraw8t/507618/

Я не понимаю, почему я простополучить заголовок таблицы, а не данные.Кто-нибудь может мне помочь?

Answer 1

Просто определите ячейку с ячейками таблицы.В ваш код вы уже добавили предметы реквизита.Вам нужно заполнить элементы внутри слота ячейками таблицы данных.

Вот ваш код с новыми изменениями.

<v-app>
  <v-content>
    <v-container fluid full-height>
      <v-layout row wrap>
        <v-flex xs12>
          <v-data-table
            hide-actions
            :headers='headers'
            :items='items'
            class='elevation-1'
          >
           <template slot="items" slot-scope="props">
             <td>{{ props.item.name }}</td>
             <td class="text-xs-right">{{ props.item.age }}</td>
           </template>
         </v-data-table>
        </v-flex>
      </v-layout>
    </v-container>
  </v-content>
</v-app>

Если вам нужна дополнительная информация , прочитайте документы

Надеюсь, это поможет.

Answer 2

Вы должны определить ячейки таблицы в слоте "items" компонента v-data-table.Заголовки отображаются автоматически, вы можете указать «заголовок» слот из заголовков клиентов.Оформить заказ codepen из Документов Vuetify для таблиц данных .Обратите внимание на шаблон в элементе v-data-table, который определяет слот «items».

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    class="elevation-1"
  >
    <template slot="items" slot-scope="props">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>
  </v-data-table>
</template>