我有一个数据表，我想根据使用findAll()从序列化返回json的api传递数据。
但是在console.log中，当我调用getUser方法时，它会返回数据。但是当你向datatable中插入数据时，它会通知你没有数据。
数据表在代码中的使用示例: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>
我认为它不起作用的原因是getUser()方法被定义但没有被调用。
如果您将异步请求移动到created()生命周期钩子中，则该请求将在组件挂载之前发出，因此表应该可以访问数据。创建https://v3.vuejs.org/api/options-lifecycle-hooks.html
我想这会对你很有帮助。
<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/';*/*