无法在 Vue Js 中打印具有关系的 Laravel API 数据

Question

使用 Laravel 10 API 和 Vue js 3 前端

我也有 EmployeeControll.php 和 3 个模型 Employee、Title 和 Salary。员工与薪资和头衔模型有很多关系，并且薪资和头衔模型与员工模型属于

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Employee;
use App\Models\Title;
use App\Models\Salary;

class EmployeeController extends Controller
{
    public function employees(){
        
            return response()->json(Employee::with('titles','salaries')->get(), 200);
    }
      
}

api.php

Route::get('employees', [App\Http\Controllers\EmployeeController::class, 'employees']);

而 Vue js EmployeeList.vue 是

<template>
    <div class="container">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First Name</th>
                    <th scope="col">Last Name</th>
                    <th scope="col">Birth Date</th>
                    <th scope="col">Gender</th>
                    <th scope="col">Hire Date</th>
                </tr>
            </thead>

            <tbody v-for="employee in employees" :key="employee.emp_no">
                <tr class="table-secondary">
                    <th scope="row">{{ employee.emp_no }}</th>
                    <th scope="row">{{ employee.first_name }}</th>
                    <th scope="row">{{ employee.last_name }}</th>
                    <th scope="row">{{ employee.birth_date }}</th>
                    <th scope="row">{{ employee.gender }}</th>
                    <th scope="row">{{ employee.hire_date }}</th>
                   
                </tr>
            </tbody>
        </table>
        
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        name:'EmployeeList',
        data() {
            return {
                employees:Array
            }
        },
        created() {
            this.getEmployees();
        },
        methods:{
            async getEmployees() {
                let url = 'http://127.0.0.1:8000/api/employees';
                await axios.get(url).then(response => {
                    this.employees = response.data.employees;
                    console.log(this.employees);
                }).catch(error => {
                    console.log(error)
                });
            }
        
        
        },
        mounted() {
            console.log('Employee List Component Mounted');
        }
    }
</script>

上面的代码段在vue js EmployeeList页面上没有显示任何数据。但是网络浏览器使用关系模型数据检查不计其数的员工数组数据？我该如何解决上述问题（在 EmployeeList 上显示数据）

以下 EmployeeController 在 EmployeeList.vue 页面上显示结果

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Employee;
use App\Models\Title;
use App\Models\Salary;

class EmployeeController extends Controller
{
    public function employees(){
        $employees = Employee::all();
        return response()->json(
            [
                'employees' => $employees,
                'message' => 'Employee',
                'code' => 200
            ]
            );
            
    }
       
}

但我需要所有关系模型的数据

编辑 员工模范班

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\HasMany;

class Employee extends Model
{
    use HasFactory;
    public $timestamps = false;

    protected $fillable = ['birth_date','first_name','last_name','gender','hire_date'];

    protected $primaryKey = 'emp_no';

    public function titles(): HasMany
    {
        return $this->hasMany(Title::class, 'emp_no','emp_no');
    }

    public function salaries(): HasMany
    {
        return $this->hasMany(Salary::class, 'emp_no','emp_no');
    }
}

Answer 1

如何在模型中定义关系可能是问题所在。

• 你能给我们看看你的模型吗？

另外，我有一个建议，为什么你不使用 InertiaJs 并直接在参数中传递 EmployeeList.vue 中的员工数据而不使用 API，这种方式更快并且编写的代码更少。