Axios 数据未显示在 Vuetify 表中答案

【问题标题】：Axios data not displayed in Vuetify tableAxios 数据未显示在 Vuetify 表中
【发布时间】：2020-05-05 13:00:37
【问题描述】：

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

【问题讨论】：

一个 Codepen 或 Codesandbox 的例子真的很有帮助。你确定是props.items.bugnum 而不是props.item.bugnum？
不确定，props.item.bugnum 也不起作用。我找不到带有 axios 的 codepan 示例。
您的浏览器开发控制台中是否出现任何错误？
请告诉我们您的控制台打印的response.data
开发控制台中没有错误！我推荐了stackoverflow.com/questions/57180521/…。

标签： node.js vue.js axios vuetify.js

【解决方案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>

我认为您的回复有大写键。可能行得通。

【讨论】：

成功了！谢谢你。不过，正如 Rie 在评论中提到的，将 props.items.bugnum 更改为 props.item.bugnum。