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>
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?
1