Axios获取的数据无法在Vuetify表格中显示问题求助

你遇到的核心问题是v-data-table的items插槽引用错误，另外还有几个细节可以优化，下面一步步帮你修复：

1. 修正插槽中的数据引用 #

你的模板里用了props.items，但实际上Vuetify的items插槽每次传递的是单个数据项（单数形式的item），这就是表格能识别行数但没有内容的原因——框架知道数组长度，但找不到对应字段的值。

修改后的模板部分：

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

2. 额外的检查与优化建议 #

• 验证API返回数据格式：确保response.data是包含bugnum、dev等字段的对象数组。可以在then回调里加console.log(response.data)，确认每个对象的键名和headers里的value完全一致（注意大小写敏感）。
• 添加item-key属性：为提升表格性能和避免渲染异常，建议给v-data-table加上:item-key="'bugnum'"（假设bugnum是每条数据的唯一标识）：

  <v-data-table :headers="headers" :items="info" :item-key="'bugnum'" class="elevation-1" >
  

• 增加加载状态提示：在数据未加载完成时显示加载动画，提升用户体验：

  <v-data-table :headers="headers" :items="info" :item-key="'bugnum'" class="elevation-1" >
    <template v-slot:loading>
      <v-progress-circular indeterminate color="primary"></v-progress-circular>
    </template>
    <!-- 原items插槽内容 -->
  </v-data-table>
  

• 捕获请求错误：在axios请求里加上catch，方便排查接口调用失败的问题：

  axios.get('http://localhost:3000/merged/')
    .then(response => {
      console.log('API返回数据:', response.data) // 调试用
      this.info = response.data
    })
    .catch(error => {
      console.error('数据加载失败:', error)
    })
  

3. 完整修正后的代码 #

<template>
  <v-data-table 
    :headers="headers" 
    :items="info" 
    :item-key="'bugnum'"
    class="elevation-1" 
  >
    <template v-slot:loading>
      <v-progress-circular indeterminate color="primary"></v-progress-circular>
    </template>
    <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 => {
        console.log('API返回数据:', response.data) // 用于调试
        this.info = response.data
      })
      .catch(error => {
        console.error('数据加载失败:', error) // 捕获请求错误
      })
  }
};
</script>

先尝试修改props.items为props.item，这应该能解决核心问题。如果还是不行，打开浏览器控制台查看console.log的输出，确认API返回的数据结构是否符合预期。

内容的提问来源于stack exchange，提问作者Katha patel