Axios 数据未显示在 Vuetify 表中

Posted 2023-02-23

【中文标题】Axios 数据未显示在 Vuetify 表中

【英文标题】：Axios data not displayed in Vuetify table

【发布时间】：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

开发控制台中没有错误！我推荐了***.com/questions/57180521/…。

【参考方案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。