我可以成功地将数据发送到控制台，但数据未打印在屏幕上。我在试着获取数据列表。
我可以在控制台上返回数据。我不知道怎么了。一切都很好。
模板：

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

这里的控制台：