Блог

Я использую vuetify 1.0. Я использую компонент v-data-table для отображения данных. Но проблема, с которой я сталкиваюсь здесь, заключается в том, что я не могу понять, как я могу отображать заголовки в строке. Что-то вроде этого, как показано ниже.

 Name:  XYZ
Location: PQR
Number: 000-000-0000
  

Но прямо сейчас таблица выглядит примерно так:

 Name      Location    Number
XYZ
PQR
000-000-0000
  

В приведенном ниже коде manager_array состоит из одного объекта.

 <template>
  <v-card>
      <v-card>
        <v-container fluid>
          <v-data-table
            :headers="headers"
            :items="manager_array"
            hide-actions
            :disable-initial-sort="true">
            <template slot="items" slot-scope="props">
              <tr>{{ props.item.first_name }}</tr>
              <tr>{{ props.item.location }}</tr>
              <tr>{{ props.item.number }}</tr>
            </template>
          </v-data-table>
        </v-container>
      </v-card>
  </v-card>      
</template>

<script>

  export default {
    props: ['manager'],
    data () {
      return {
        manager_array: [],
        headers: [
          { text: 'Name', value: 'name'},
          { text: 'Location', value: 'location'},
          { text: 'Number', value: 'number'},
        ]
      }
    },
    created() {
      this.manager_array.push(this.manager)
    },
  };
</script>