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(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  :(