SeregPie/VueWordCloud

Question - what causes a re-render of the cloud?

baking-code opened this issue · 2 comments

baking-code commented

Hi,

Many thanks for this component. I'm new to vue so this may be a silly question. I'm using the cloud in the following scenario:

<div class="cloud" v-show="toggleOn" v-on:click="onToggleCloud">
    <vue-word-cloud :words="words" color="#fffde7" rotation=0 font-family="Avenir">
    </vue-word-cloud>
</div>

where the toggleOn variable is a boolean to control visibility of the component. Clicking the wrapper quickly shows and hides the cloud as expected. However, after waiting a couple of seconds, clicking to show the cloud takes about 2s for the cloud to reappear - I see that a worker thread is active during this pause. Why would this happen?

Many thanks,
Ben

SeregPie commented

Hello.

Use v-if insead of v-show. With v-show the component is still there, but is set to display :none. With v-if it does not get rendered.

The cloud also re-renders every time the container changes its size. With display :none the size changes to 0-0.

baking-code commented

The cloud also re-renders every time the container changes its size. With display :none the size changes to 0-0.

Ahh, I see. Thanks for your explanation, closing this as its not actually an issue :)