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

// ContactController.php
public function getContacts() {
    $contacts = Contact::all();
    return $contacts; // 直接返回 Eloquent 集合
}

// ContactController.php
use Illuminate\Http\JsonResponse;

public function getContacts(): JsonResponse
{
    $contacts = Contact::all();
    $data['contacts'] = $contacts;

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

// ContactList.vue
<script>
export default {
    name:'Contact',
    created() {
        this.loadData();

    },
    methods: {
        loadData() {
            let url = this.url + '/api/getContacts';
            this.axios.get(url).then(response => {
                this.contacts = response.data // 直接将 response.data 赋值给 contacts
                console.log(this.contacts);
            });
        },
        mounted() {
            console.log('Contact List Component Mounted');
        },
        data() {
            return {
                url: document.head.querySelector('meta[name="url"]').content,
                contacts:[]
            }
        }
    }
}
</script>

// ContactList.vue
<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th>Designation</th>
          <th>Contact No</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>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'ContactList',
  data() {
    return {
      url: document.head.querySelector('meta[name="url"]').content,
      contacts: [],
    };
  },
  mounted() {
    this.loadContacts();
  },
  methods: {
    loadContacts() {
      this.axios
        .get(this.url + '/api/getContacts')
        .then((response) => {
          if (response.data.status) {
            this.contacts = response.data.data.contacts;
          } else {
            console.error('Failed to load contacts:', response.data.message);
            // Handle error appropriately, e.g., display an error message to the user
          }
        })
        .catch((error) => {
          console.error('Error loading contacts:', error);
          // Handle error appropriately, e.g., display an error message to the user
        });
    },
  },
};
</script>