Vue.js中API数据表格渲染及路由跳转问题排查

问题描述 #

1. 从API获取数据库数据，以对象形式渲染表格时正常显示，但转换为数组后表格无法展示内容；
2. 需实现点击表格操作列按钮跳转至指定用户详情页的路由功能。

已确认API返回正常数据，当前Vue组件模板及代码存在多处错误，以下是修正方案：

错误分析与修正 #

1. 表格数据渲染失败问题 #

核心错误点：

• v-data-table 缺少必填的 :items 属性绑定，原代码写成了 :="doctors"，导致数据无法传入表格；
• 表头配置与数据字段不匹配（如role对应API返回的roles，updated_at字段API未返回）；
• 模板中存在重复的username列，且部分字段映射错误。

修正后的模板代码：

<template>
  <div>
    <v-data-table hide-actions flat :headers="headers" :items="doctors">
      <template v-slot:items="props">
        <td>{{ props.index + 1 }}</td>
        <td>{{ props.item.full_name }}</td>
        <td>{{ props.item.email }}</td>
        <td>{{ props.item.roles }}</td>
        <td>{{ props.item.created_at }}</td>
        <td> 
          <v-btn outline small color="indigo" @click="view(props.item)">
            <i class="fa fa-eye"></i> &nbsp; 查看详情
          </v-btn>
        </td>
      </template>
      <template v-slot:no-results>
        <h6 class="grey--text">暂无数据</h6>
      </template>
    </v-data-table>
  </div>
</template>

表头配置修正：

headers: [
  {text: "#", value: ""},
  {text: "姓名", value: "full_name"},
  {text: "邮箱", value: "email"},
  {text: "角色", value: "roles"},
  {text: "创建时间", value: "created_at"},
  {text: "操作", value: "action"},
],

额外注意：

确保Vuex的getListDoctors getter返回的是API中的data数组（即response.data.data），而非原始响应对象。

2. 路由跳转功能实现 #

核心错误点：

• view方法参数命名错误（定义为id，但实际接收的是用户对象）；
• 路由跳转代码语法错误，item.id未定义，且_blank的使用方式不正确。

修正后的方法代码：

methods: {
  ...mapActions({
    fetchDoctors: 'setListDoctors'
  }),
  view(user) {
    // 单页内跳转
    this.$router.push(`/finance/pay-doctors/${user.id}`);
    
    // 若需打开新窗口，使用以下代码：
    // const url = this.$router.resolve({ path: `/finance/pay-doctors/${user.id}` });
    // window.open(url.href, '_blank');
  }
},

完整修正后组件代码 #

<template>
  <div>
    <v-data-table hide-actions flat :headers="headers" :items="doctors">
      <template v-slot:items="props">
        <td>{{ props.index + 1 }}</td>
        <td>{{ props.item.full_name }}</td>
        <td>{{ props.item.email }}</td>
        <td>{{ props.item.roles }}</td>
        <td>{{ props.item.created_at }}</td>
        <td> 
          <v-btn outline small color="indigo" @click="view(props.item)">
            <i class="fa fa-eye"></i> &nbsp; 查看详情
          </v-btn>
        </td>
      </template>
      <template v-slot:no-results>
        <h6 class="grey--text">暂无数据</h6>
      </template>
    </v-data-table>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      page: 1,
      dateFormat: "DD MMM, YYYY",
      selected: null,
      dialog: false,
      loading: false,
      saveLoader: false,
      headers: [
        {text: "#", value: ""},
        {text: "姓名", value: "full_name"},
        {text: "邮箱", value: "email"},
        {text: "角色", value: "roles"},
        {text: "创建时间", value: "created_at"},
        {text: "操作", value: "action"},
      ],
    };
  },
  computed: {
    ...mapGetters({
      doctors: "getListDoctors",
    }),
  },
  methods: {
    ...mapActions({
      fetchDoctors: 'setListDoctors'
    }),
    view(user) {
      this.$router.push(`/finance/pay-doctors/${user.id}`);
    }
  },
  mounted() {
    this.fetchDoctors();
  },
}
</script>

内容的提问来源于stack exchange，提问作者penina kinanu