Back to forum

WebDataRocks within Vue.js component

Answered

Hi
 
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

<template>
<div id="slpivotcontainer"</div>
</template>

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?

Martyn

3 answers

WebDataRocks Team WebDataRocks November 22, 2019

Hello,
 
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

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

mshiner November 22, 2019

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

Move up