Данные Ax ios не отображаются в таблице Vuetify - PullRequest
Новая
       19

Данные Ax ios не отображаются в таблице Vuetify

0 голосов
/ 19 января 2020

снимок экрана Я пытаюсь отобразить данные (извлеченные из API через Ax ios) в таблицу vuetify. Как показано на скриншотах, загружено 23 пустых строки без данных. 

<template>
  <v-data-table
    :headers="headers"
    :items="info"
    class="elevation-1"
  >
  <template v-slot:items="props">
      <td>{{ props.items.bugnum }}</td>
       <td>{{ props.items.dev }}</td>
       <td>{{ props.items.sev }}</td>
      <td>{{ props.items.status }}</td>
       <td>{{ props.items.sub }}</td>
     </template>
  </v-data-table>
</template>

<script>
import axios from 'axios'
export default {
  name: 'App',
  data () {
    return {
      headers: [
      {text: 'BUG NUMBER', value: 'bugnum'},
      {text: 'DEVELOPER', value: 'dev'},
      {text: 'SEVERITY', value: 'sev'},
      {text: 'STATUS', value: 'status'},
      {text: 'SUBJECT', value: 'sub'},
      ],
      info: []
    }
  },
  mounted () {
    axios
      .get('http://localhost:3000/merged/')
      .then(response => {
        this.info = response.data
      })
  }
};
</script>

vue: 2.6.10 vuetify: 2.2.4

1 Ответ

1 голос
/ 19 января 2020

Можете ли вы попробовать это: 

<template>
  <v-data-table
    :headers="headers"
    :items="info"
    class="elevation-1"
  >
  <template v-slot:items="props">
      <td>{{ props.item.BUGNUM }}</td>
       <td>{{ props.item.DEV }}</td>
       <td>{{ props.item.SEV }}</td>
      <td>{{ props.item.STATUS }}</td>
       <td>{{ props.item.SUB }}</td>
     </template>
  </v-data-table>
</template>

<script>
import axios from 'axios'
export default {
  name: 'App',
  data () {
    return {
      headers: [
      {text: 'BUG NUMBER', value: 'BUGNUM'},
      {text: 'DEVELOPER', value: 'DEV'},
      {text: 'SEVERITY', value: 'SEV'},
      {text: 'STATUS', value: 'STATUS'},
      {text: 'SUBJECT', value: 'SUB'},
      ],
      info: []
    }
  },
  mounted () {
    axios
      .get('http://localhost:3000/merged/')
      .then(response => {
        this.info = response.data
      })
  }
};
</script>

Поскольку я думаю, что ваш ответ имеет заглавные ключи. Может быть, это работает.

...