Question

screenshot我正在尝试在vuetify表中显示数据（通过axios从api获取）。如屏幕截图所示，已加载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 验证：2.2.4

Answer 1

您能尝试一下吗？

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

我认为您的回复包含大写字母。可能有用。

Vuetify表中未显示Axios数据

1 个答案: