Metronic Vue Datatable with remote data and Menues with content loaded async
Hello,
Im using Metronic Vue version 8.1.5, and I want to load a datatable with data loaded via HTTP Get using ApiService.
So far the only way I found to be able to do that was by getting the data in my setup function and making the setup async as using Suspense.
I was able to get the datatable to work however now I cant have menus on my page. From what I read its because the page pas loaded async and I needed to use MenuComponent.reinitialization() however that isnt working either.
Is there a better way to use the Datatable with remote data or is there a way to fix the menus?
Replies (5)
Hi Alex,
MenuComponent reinitialization should fix menus, could you please attach the code of your request?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
const getClients = ApiService.get("clients").then(response => {
return response.data;
}).catch(error => console.log(error));export default defineComponent({
name: "clients",
components: {
Datatable,
KTPageTitle
},
async setup() {
MenuComponent.reinitialization();
const clients = await getClients;
interface IClient {
id: number
name: string
country: string
subdomain: string
deploy_type: string
deploy_plan: string
}
const tableData = ref<Array<IClient>>(clients);
return {
tableData,
}
}
});
Hi,
Try to move your request code and component initialization code into onMounted function.
Something like:
onMounted(async () => {
const clients = await getClients;
MenuComponent.reinitialization();
})Regards,
Lauris Stepanovs,
Keenthemes Support Team
Your Support Matters!
Hi, thank you for your response, however in my setup() I use clients in my variable tableData:
const tableData = ref(clients);
So if I move it then it wont be defined.
In this case, I think you can remove clients variable and assign your value directly into tableData.
const tableData = ref([]);onMounted(async () => {
tableData.value = await getClients;
MenuComponent.reinitialization();
})
Regards,
Lauris Stepanovs,
Keenthemes Support Team
