Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Problem with using vue version metronic8 theme.


Sample Route: /apps/subscriptions/subscription-list

I'd like to use "KDDataTable" to render my data, but in demo they use a static typescript list.


const data = ref([
{
id: 1,
customer: "Emma Smith",
status: "Active",
color: "success",
billing: "Auto-debit",
product: "Basic",
createdDate: "Oct 25, 2021",
},
{
id: 2,
customer: "Melody Macy",
status: "Active",
color: "success",
billing: "Manual - Credit Card",
product: "Basic",
createdDate: "Mar 10, 2021",
},
{
id: 3,
customer: "Max Smith",
status: "Active",
color: "primary",
billing: "Manual - Cash",
product: "Teams Bundle",
createdDate: "Jul 25, 2021",
}
.... }


But, I use my own data by axios request and all the fields can work properly, but the only field "Actions", if I don't use a static list as I click the button the sub-menu not show but force refresh the page.

My Code:


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Hi Anthony,

The problem is related to our MenuComponent, we initialize this component on every page to create menu instances. Since table data is rendered asynchronously at the moment of component initialization, menu items in the table don't exist. To fix this you can just reinitialize the menu component when data is received.

Call the reinitialization function of MenuComponent.

MenuComponent.reinitialization();


Regards,
Lauris Stepanovs,
Keenthemes Support Team



Thanks, I will try.



Hi Anthony,

Let me know if you will need any further help from us happy

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(