I am facing an issue while trying to create a table using Vue.js and Laravel. The problem is that each row of the table data is being displayed as a separate table.
Despite making changes to the code in both Vue and the controller, I cannot seem to resolve this issue and the result remains unchanged.
Below is the code from Customers.vue:
<template>
<div>
<h2>Customer Details</h2>
<table class="table table-bordered" v-for="customer in customers" v-bind:key="customer.CustomerID">
<tr>
<th>ID</th>
<th>Customer</th>
<th>Address</th>
<th>Contact No.</th>
</tr>
<tr>
<td>{{customer.CustomerID}}</td>
<td>{{customer.Customer}}</td>
<td>{{customer.Address}}</td>
<td>{{customer.CustomerContactNo}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data() {
return {
customers: [],
customer: {
CustomerID: '',
Customer: '',
Address: '',
CustomerContactNo: ''
},
customer_CustomerID:'',
pagination: {},
edit: false
}
},
created (){
this.fetchCustomers();
},
methods: {
fetchCustomers() {
fetch('api/customers')
.then(res => res.json())
.then(res => {
this.customers = res.data;
});
}
}
};
</script>
The code for the Controller (index) is provided below:
class CustomerController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
// Get customer details
$customers = Customer::orderBy('created_at','desc')->paginate(5);
//Return collection of Customers as a resource
return CustomerResource::collection($customers);
}
I anticipate the output of the table to be a single unified table instead of each row being rendered as a distinct table. Your help on resolving this issue would be greatly appreciated. Thank you.