WebDataRocks within Vue.js component


Can I put the WDR in a vue.js component? I would like to have tabs on my dashboard where the first tab does not have the pivot table showing. I set up a vue component called SLPivotTable.vue and in the template for the component have a div element with id= slpivotcontainer

<div id="slpivotcontainer"</div>

The I then made the api call as per the documentation such that the container for the WebDataRocks pivot table is set as

container: "#slpivotcontainer",

but I get an error as follows

WebDataRocks Reporting Component:
Unable to create the component. DOM element with id 'slpivotcontainer' is not found.

I’ve looked in the DOM and the div element is there under app.

Any ideas?


3 answers

WebDataRocks Team WebDataRocks November 22, 2019

Thank you for your question.
Because of tabs structure, the div, containing the component can be dynamically created after the user opens it manually.
We kindly recommend make sure that new WebDataRocks is invoked later than its container is created (after the user opens a tab with a pivot).
We hope it helps.
Kind Regards,
WebDataRocks Team

mshiner November 22, 2019

Would you be able to give me an example of how this might work?
Thanks in advance

mshiner November 22, 2019

Added the new WebDataRocks into the mounted() section of the component.