developing a project using Laravel backend and Vue Js 3 Single page Application
Laravel api is working properly but in the vue js frontend not printing data properly. I have following EmployeeList.vue
<template>
<div class="container">
<div 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>
</div>
</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>
I have following Entity Relationships with each Models Employee.php
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');
}
}
Salary.php
class Salary extends Model
{
use HasFactory;
protected $fillable = ['salary','from_date','to_date'];
public function employee(): BelongsTo
{
return $this->belongsTo(Employee::class, 'emp_no');
}
}
Title.php
class Title extends Model
{
use HasFactory;
public $timestamps = false;
protected $fillable = ['title','from_date','to_date'];
public function employee(): BelongsTo
{
return $this->belongsTo(Employee::class, 'emp_no');
}
}
in my browser console EmployeeList Array printing properly. but in the vue js html code not displaying EmployeeList data on the browser. what is the problem here? are those relationship effected for this problem?
