'GET json api data in datatable with axios and vuejs
I have a datatable and I want to pass the data according to the api that returns a json using findAll() from the sequelize..
But in console.log when I call the getUser method it returns the data with the data. But when you insert data into the datatable: it is informing you that it has no data.
Example datatable using in code: 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>
Solution 1:[1]
I believe the reason it doesn't work is because the getUser() method is defined but not called.
If you move the async request into a created() lifecycle hook, the request will be made before the component is mounted, so the table should have access to the data. https://v3.vuejs.org/api/options-lifecycle-hooks.html#created
Solution 2:[2]
I think this will really help you.
<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/';*/*
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Catherine Luse |
| Solution 2 | Tyler2P |