working with Laravel 10 API and Vue js 3 frontend
I have following EmployeeControll.php with 3 Models Employee,Title and Salary as well. Employee has many relationship with Salary and Title Models and Salary and Title Models has BelongsTo with Employee Model
<?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']);
and Vue js EmployeeList.vue is
<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>
above code segment did not display any data on vue js EmployeeList page. but web browser inspect uncounted Employee Array data with Relationship Models data? how could I fix above matter (displaying data on EmployeeList)
following EmployeeController showing result on EmployeeList.vue page
<?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
]
);
}
}
but I need data with all relationship Models
Edit Employee Model Class
<?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');
}
}
change EmployeeController this way
public function employees() {
$employees = Employee::with('titles', 'salaries')->get();
return response()->json([
'employees' => $employees,
'message' => 'Employees retrieved successfully',
'code' => 200
]);
and now it is working fine