Create the main menu asynchronously using the ApiService
Hello!
I'm using Metronic Vue version 8.1.8.
To manage permissions on the server side, I would like to create the main menu asynchronously by making a request to the server using the ApiService.
I made the following changes in the original Metronic Vue Demo7 component /src/layouts/main-layout/aside/Menu.vue:
Commented out the line that imports MainMenuConfig.
// import MainMenuConfig from "@/core/config/MainMenuConfig";Created a constant to replace MainMenuConfig.
const MainMenuConfig = ref<Array<any>>([]);Added the ApiService request to the onMounted hook and assigned the obtained result to MainMenuConfig.value (the result obtained from the request is exactly the same as the definition in MainMenuConfig file @/core/config/MainMenuConfig.ts):
onMounted(async () => {
if (scrollElRef.value) {
scrollElRef.value.scrollTop = 0;
}
ApiService.setHeader();
await ApiService.get("/api/menu")
.then(({ data }) => {
MainMenuConfig.value = data
})
});Unfortunately, I did not succeed.
Could you please assist me with this issue?
Replies (3)
Hi Fernando,
Please make sure your request passes successfully and data is received.
If you are following the same object structure as in the default Metronic theme then your code should be working.
Could you please check your browser's console for errors?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris,
Sorry, I found a difference in the result coming from the server.
It worked. Thank you.
Hi Fernando,
Glad to hear that. Please don't hesitate to reach out if you need anything more from us.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Your Support Matters!
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
