We are integrating with vue.js, but we need to dynamically build div elements

I was looking at https://www.flexmonster.com/question/integrtion-with-vue-js/ and it was suggested to put the container div element in index.html.  
We are building a proof of concept dashboard, the problem is we don’t know how many widgets we will need to create until we get the data within vue.  

So for now, I have the following in my vue file:
 
<div class=”content”>
<div id=”page1″ v-show=”page == 1″ class=”page” style=””>
<div id=”pivotContainer1-grid” class=”widget”></div>
<div id=”pivotContainer1-charts” class=”widget”></div>
</div>
<div id=”page2″ v-show=”page == 2″ class=”page” style=””>
<div id=”pivotContainer2-grid” class=”widget”></div>
<div id=”pivotContainer2-charts” class=”widget”></div>
</div>
<div id=”page3″ v-show=”page == 3″ class=”page” style=””>
<div id=”pivotContainer3-grid” class=”widget”></div>
<div id=”pivotContainer3-charts” class=”widget”></div>
</div>

</div>
 
If I use a v-for loop to dynamically build these elements, then I get an error within flexmonster that the container cannot be found (since it is not in the dom)
 
Any suggestions on how to do this?  Thanks.
 
 

1 answer

Public
Dmytro Zvazhii Flexmonster October 29, 2018

Hello Chad,
Thank you for your question. Such an error means that you are trying to create Flexmonster when the div element with necessary id is not yet created in Dom.
In such case, we recommend trying the following approach: firstly create the necessary Dom elements storing the id’s for example to some array and then run script with Flexmonster constructor where the appropriate container value is set.
Please let us know if the suggested approach worked for you.
Regards,
Dmytro

Please login or Register to Submit Answer