为何无法通过Vue.js从Laravel数据库获取公司数据仅显示表头？

以下是针对你代码中存在的问题逐一修复的步骤：

1. 修正API请求地址 #

你的请求地址指向了前端项目的routes/api.php，这是错误的。Laravel的API路由需要通过后端域名+/api/前缀访问，resource('firma')对应的列表接口是GET /api/firma。修改Welcome.vue中的请求地址：

data(){
    return{
        url: "http://localhost:8000/api/firma", // 替换为你的Laravel后端实际地址
        firmas: []
    };
}

2. 修复Vue插值语法错误 #

Firmen.vue中使用了单大括号{}，这不符合Vue的插值语法规范，需要改为双大括号{{}}：

<template>
    <td>{{ firmas.id }}</td>
    <td>{{ firmas.firmenname }}</td>
</template>

3. 修正表格结构与循环逻辑 #

FirmenListe.vue存在两处错误：

• 表格主体标签应该是<tbody>而非<body>
• v-for循环绑定位置错误，应该绑定在<tr>上，确保每条数据生成独立行：

<template>
    <div class="firma-liste">
        <div class="data">
            <table class="ui celled table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Firmenname</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="firma in firmas" :key="firma.id">
                        <Firmen :firmas="firma"/>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

（注：将循环变量名改为firma，避免与props的数组名firmas冲突，提升代码可读性）

4. 添加请求错误调试逻辑 #

在axios请求中加入错误捕获，方便排查请求失败原因：

methods: {
    getFirma(){
        axios.get(this.url)
            .then(data => {
                this.firmas = data.data;
            })
            .catch(error => {
                console.error('API请求失败:', error.response?.data || error.message);
            })
    }
}

5. 确保Laravel控制器返回正确数据 #

检查FirmaController.php的index方法，确保正确返回公司列表数据：

public function index()
{
    return \App\Models\Firma::all(); // 根据需求可添加分页、筛选等逻辑
}

6. 解决跨域问题（前后端端口不同时） #

如果前端运行在5174端口，后端在8000端口，需要配置Laravel跨域：

• Laravel 9+：直接修改config/cors.php，将allowed_origins设置为['http://localhost:5174']，paths设置为['api/*']
• Laravel 8及以下：安装fruitcake/laravel-cors包，在config/cors.php中配置允许的源和路径，并确保api中间件组包含HandleCors中间件

7. 验证API可用性 #

直接在浏览器访问http://localhost:8000/api/firma，确认能返回JSON格式的公司数据。如果无法返回，先排查Laravel路由、控制器及数据库连接问题。

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