Tengo una tabla de datos y quiero pasar los datos de acuerdo con la API que devuelve un json usando findAll() de la secuencia.
Pero en console.log cuando llamo al método getUser devuelve los datos con los datos. Pero cuando inserta datos en la tabla de datos: le informa que no tiene datos.
Ejemplo de tabla de datos usando código: https://vuejsexamples.com/a-vue-plugin-that-adds-advanced-features-to-an-html-table/
<template> <div> <data-table v-bind="bindings"/> </div> </template> <script> import ActionButtons from "../Components/ActionButtons" import axios from "axios" export default { name: 'Usuarios', data(){ return { user: this.user, errors: [] } }, computed: { bindings() { return { data: this.user, lang: "pt-br", actionMode: "single", columns: [ { key:"code", title:"Código" }, { key:"name", title:"Nome" }, { key:"login", title:"Login" }, { key:"cpf", title:"CPF" }, { key:"actions", title:"Ações", component: ActionButtons, }, ], } } }, methods:{ getUser() { axios .get("http://localhost:3005/users") .then((res) => { this.user = res.data; }) .catch((error) => { console.log(error); }); }, } }; </script>Creo que la razón por la que no funciona es porque el método getUser() está definido pero no llamado.
Si mueve la solicitud asíncrona a un gancho de ciclo de vida created() , la solicitud se realizará antes de que se monte el componente, por lo que la tabla debería tener acceso a los datos. https://v3.vuejs.org/api/options-lifecycle-hooks.html#created
Creo que esto realmente te ayudará.
<template> <v-card> <v-card-title> Liste du Personnel </v-card-title> <v-card-text class="mt-3"> <main> <data-table v-bind="listing_personnel" @actionTriggered="handleAction"/> <br> </main> </v-card-text> </v-card> </template> <script> import axios from "axios"; import ActionButtons from "./ActionButtons" export default { data(){ return { user: [], errors: [] } }, created() { this.getPersonnel(); }, methods: { handleAction(actionName, data) { console.log(actionName, data); window.alert("check out the console to see the logs"); }, async getPersonnel() { try { const response = await axios.get("SeletAllUsers"); this.user = response.data; } catch (error) { console.log(error); } }, }, computed: { listing_personnel() { return { data: this.user, actionMode: "multiple", columns: [ { key: "user_matricule", title: "Matricule" }, { key: "user_lastname", title: "Noms" }, { key: "user_firstname", title: "Prénoms" }, { key: "user_contact1", title: "Contact" }, { key: "user_email", title: "Email" }, { key:"actions", title:"Actions", component: ActionButtons, }, ] }; } }, }; </script> /* preferably put this in its main.js axios.defaults.baseURL = 'http://localhost:8080/';*/*