Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

171
Visualizações
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?

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda