本文旨在帮助开发者解决在使用 laravel REST API 和 vue.JS 构建应用时，数据无法正确显示的问题。通过分析常见错误原因，并提供修正后的代码示例，本文将指导你如何正确地从 Laravel 后端获取数据，并在 Vue.js 前端进行渲染，确保数据能够顺利展示。
问题分析
当 Vue.js 应用无法正确显示从 Laravel API 获取的数据时，通常是由于以下几个原因：
- 数据格式不匹配： Laravel API 返回的数据格式与 Vue.js 组件期望的格式不一致。
- 数据访问错误： Vue.js 组件中访问数据的路径不正确，导致无法获取到所需的数据。
- 响应式问题： Vue.js 组件中的数据没有被正确地声明为响应式，导致数据更新后无法触发视图更新。
解决方案
要解决这个问题，我们需要从 Laravel 后端和 Vue.js 前端两个方面进行调整。
1. Laravel 后端调整
在 Laravel 的 ContactController.php 中，我们需要确保 API 返回的数据格式是 Vue.js 组件能够正确解析的。建议使用 response()->json() 方法返回 JSON 格式的数据，并包含状态码、消息和数据三个字段。
立即学习“前端免费学习笔记（深入）”；
<?php namespace AppHttpControllers; use AppModelsContact; use IlluminateHttpJsonResponse; 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 ]); } }
说明：
- response()->json() 方法用于返回 JSON 格式的数据。
- status 字段表示 API 请求的状态，true 表示成功。
- message 字段包含 API 请求的描述信息。
- data 字段包含实际的数据，这里将 $contacts 数组封装在 data 数组中的 contacts 字段中。
2. Vue.js 前端调整
在 Vue.js 的 ContactList.vue 组件中，我们需要修改 loadData 方法，以正确地从 API 响应中获取数据。
<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>
说明：
- this.contacts = response.data.data.contacts; 这行代码用于从 API 响应中获取 contacts 数组。由于 Laravel 后端返回的数据格式为 {‘status’: true, ‘message’: ‘…’, ‘data’: {‘contacts’: […]}}，因此我们需要通过 response.data.data.contacts 才能获取到实际的联系人数据。
- 添加了 catch 块来处理 API 请求失败的情况，并在控制台输出错误信息，方便调试。
3. 注意事项
- 确保 Laravel API 路由配置正确，并且可以被 Vue.js 应用访问。
- 在 Vue.js 组件中，使用 data 选项声明响应式数据，以便在数据更新时触发视图更新。
- 使用 console.log() 调试 API 响应，确保数据格式正确。
- 如果遇到跨域问题，需要在 Laravel 后端配置 CORS。
总结
通过以上步骤，我们可以解决 Laravel 与 Vue.js 应用中数据无法正确显示的问题。关键在于确保 Laravel API 返回的数据格式与 Vue.js 组件期望的格式一致，并且在 Vue.js 组件中正确地访问数据。同时，注意处理 API 请求的错误情况，并进行适当的调试。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
