Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

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?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.

Hi, thank you for your response, however in my setup() I use clients in my variable tableData:

const tableData = ref<Array<IClient>>(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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(