Vue.js页面无法渲染接口返回数据的问题求助

我通过Axios成功从接口获取数据并在控制台打印，但页面无法渲染该数据列表，控制台数据显示正常，找不到问题所在，相关代码及控制台截图如下：

模板代码 #

<template>
    <div class="card">
      <div class="card-header pb-0 px-3">
        <h6 class="mb-0">Personnel Information</h6>
      </div>
      <div class="card-body pt-4 p-3" >
        <ul class="list-group">
          <li class="list-group-item border-0 d-flex p-4 mb-2 bg-gray-100 border-radius-lg"  v-for="personnel in personnels" :key="personnel.id">
            <div class="d-flex flex-column" >
               <h6 class="mb-3 text-sm"> {{personnel.name}} {{personnel.surname}}</h6>
              <span class="mb-2 text-xs">
                Title:
                <span class="text-dark font-weight-bold ms-sm-2">{{personnel.title}}</span>
              </span>
            </div>
            <div class="ms-auto text-end">
              <a class="btn btn-link text-danger text-gradient px-3 mb-0" href="javascript:;">
                <i class="far fa-trash-alt me-2" aria-hidden="true"></i>Delete
              </a>
              <a class="btn btn-link text-dark px-3 mb-0" href="javascript:;">
                <i class="fas fa-pencil-alt text-dark me-2" aria-hidden="true"></i>Edit
              </a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </template>

脚本代码 #

<script>
import axios from 'axios';
export default {
name: "personnel-card",
    data(){
        return {
            personnels:[],
        }
    },
    methods: {
getPersonnels(){
             const path = 'https://localhost:7022/api/Personnels';
             axios.get(path)
                 .then((res)=> {
                     console.log(res);
                     this.personnels = res.data.data.personnels;
                 })
                 .catch((error) => {
                     console.error(error);
                 })
         },
    },
    created(){
            this.getPersonnels();
    }
}
</script>

控制台截图 #

解决方法 #

从控制台截图的返回数据结构可以看到，接口返回的res.data直接就是人员列表数组，你当前代码里的res.data.data.personnels是错误的取值路径，把赋值语句改成：

this.personnels = res.data;

即可正常渲染列表。

原因：你误以为返回数据有嵌套的data.personnels层级，但实际接口返回的data字段就是目标数组，之前的错误路径导致personnels始终是空数组，所以页面无法渲染内容。

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