How to fix my table rows in laravel with vuejs?(rows get separated into other table)

Question

I'm trying to make a table with vuejs and laravel but the table row/data get separated each as another table.

I've tried changing some code in the vue and controller but it just ends up with the same result.

Customers.vue

<template>
    <div>
        <h2>Customer Details</h2>
        <div 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>
        </div>
    </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>

Controller(index):

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 expect the table to just be one instead of each row turning into a separate table. Thanks.

Answer 1

Its because you have your v-for loop on the table element, meaining it makes a new table for every customer.

• Move the v-for directive into the customer tr element.

Customers.vue

<template>
    <div>
        <h2>Customer Details</h2>
        <table class="table table-bordered">
        <tr>
            <th>ID</th>
            <th>Customer</th>
            <th>Address</th>
            <th>Contact No.</th>
        </tr>
            <tr v-for="customer in customers" v-bind:key="customer.CustomerID">
                <td>{{customer.CustomerID}}</td>
                <td>{{customer.Customer}}</td>
                <td>{{customer.Address}}</td>
                <td>{{customer.CustomerContactNo}}</td>
            </tr>
        </table>
    </div>
</template>