'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