No color displaying initially when component's rendering is dynamic

[mg98]

Describe the bug
Color in color picker initially not displaying. See screenshot:

To Reproduce
This actually only happens when you have the color picker in a component that is not initially rendered. In my case I wanted the color picker in a sidebar component, that only renders when it has to.

I could only work around by something like this:

mounted() {
    setTimeout(() => { this.keyUsedOnVerte = someInt }, 1500);
}

Desktop (please complete the following information):

• OS: macOS
• Browser chrome

[craigdanj]

I've run into this issue as well when trying to render it in a popup/modal. The workaround actually works but is just a workaround. It would be cool if this could be fixed in the component itself.

[ksidibe]

I have the same issue. Like @craigdanj I'm using verte in a modal window.

[ghost]

@mg98 I have the same problem, but I don't understand where I have to put the workaround code. Do you have an example?

[mg98]

Hello @Phillipcodes, so you have a component that is not initially rendered and that includes verte, for example

<template>
    <verte :key="x" />
</template>

Put a key on the verte component. Because when you now change the key, it will force the component to rerender.
So what I did have to do apparently was to have the following script in the component, that included the verte component:

<script>
export default {
    data: () => ({
        x: 0
    }),
    mounted() {
        setTimeout(() => {
            const x = either some random int or something that would make more sense in your case, like the id of an object your showcasing
            this.x = x;
        }, 1500);
    }
}
</script>

I have actually not used the library since.

[ghost]

@mg98 Thanks a lot for your fast help. In my case it worked without timeout, like this:

<template>
  <verte v-if="mounted"></verte>
</template>

<script>
import verte from 'verte'

export default {
    components: { verte },
    data() {
        return {
            mounted: false,
        }
    },
    mounted() {
        this.mounted = true
    },
}
</script>

[mg98]

Ok perfect! I just remember that I had to put timeout and 1000ms were not even enough. But don't remember exactly what my situation was :)

[mauricio-testa]

I have the same problem using sweet-modal :/

[ShetlandJ]

If the mounted = true solution does not work for you, please try this:

this.$nextTick(() => this.mounted = true);