解决 Laravel 与 Vue.js 应用中数据无法正确显示的问题

<?php

namespace App\Http\Controllers;

use App\Models\Contact;
use Illuminate\Http\JsonResponse;

class ContactController extends Controller
{
    /**
     * 获取联系人列表
     *
     * @return JsonResponse
     */
    public function getContacts(): JsonResponse
    {
        $contacts = Contact::all();

        $data['contacts'] =  $contacts;

        return response()->json([
            'status' => true,
            'message' => 'Contacts collected',
            'data' => $data
        ]);
    }
}

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th>Designation</th>
          <th>Contact No</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="contact in contacts" :key="contact.id">
          <td>{{ contact.id }}</td>
          <td>{{ contact.name }}</td>
          <td>{{ contact.email }}</td>
          <td>{{ contact.designation }}</td>
          <td>{{ contact.contact_no }}</td>
          <td>
            <button class="btn btn-danger btn-sm">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "Contact",
  data() {
    return {
      url: document.head.querySelector('meta[name="url"]').content,
      contacts: [],
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      let url = this.url + "/api/getContacts";
      this.axios
        .get(url)
        .then((response) => {
          this.contacts = response.data.data.contacts;
          console.log(this.contacts);
        })
        .catch((error) => {
          console.error("Error fetching contacts:", error);
        });
    },
  },
};
</script>