'not visible laravel_api data in Vue js front end App
using Vue js 3 as foolowing to display customers data in the Vue app CustomerList.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">Email</th>
<th scope="col">Contact No</th>
</tr>
</thead>
<tbody v-for="customer in customers" :key="customer.id">
<tr class="table-secondary">
<th scope="row">{{customer.id}}</th>
<th scope="row">{{customer.fname}}</th>
<th scope="row">{{customer.lname}}</th>
<th scope="row">{{customer.email}}</th>
<th scope="row">{{customer.contact_no}}</th>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios';
export default {
name:'CustomerList',
data(){
return {
customers:Array
}
},
created() {
this.getCustomers
},
methods: {
async getCustomers() {
let url = 'http://127.0.0.1:8000/api/customers';
await axios.get(url).then(response => {
this.customers = response.data.customers;
console.log(this.customers);
}).catch(error => {
console.log(error);
});
}
},
mounted() {
console.log('Customer List Component mounted');
}
}
</script>
I have following Laravel_api web.php
Route::get('customers',[App\Http\Controllers\CustomerController::class, 'getCustomers']);
CustomerController.php
public function getCustomers(){
$customers = Customer::all();
return response()->json(
[
'customers' => $customers,
'message' => 'Customers',
'code' => 200
]
);
}
but when running both applications not visible table data in the vue file and not print console objects data also. how could I fix this problem here?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
