colorValue not updating without re-render of component.

[christywastaken]

The value passed into v-model doesn't update the color picker value unless the component is re-rendered.

As a workaround, I can force a re-render of the component, but this doesn't feel right. This looks like:

<Vue3ColorPicker :key="componentKey"
      v-model="colorValue"
      mode="solid"
      :show-color-List="false"
      :show-eye-drop="false"
      type="RGB"
      show-color-list="true"
      color-list-count="10"
    />

<script setup lang="ts">
import { Vue3ColorPicker } from '@cyhnkckali/vue3-color-picker'

const conponentKey = ref(0)
const colorValue = ref('rgba(255, 255, 255, 1)') 

watch(
  computedButtonId,
  (newButtonId, oldButtonId) => {
    if (newButtonId !== oldButtonId) {
      colorValue.value = ledControlState.value[newButtonId] || 'rgba(255, 255, 255, 1)';
      // Increment componentKey to force re-render
      componentKey.value += 1;
    }
  } 
);
</script>

[cyhnkckali]

Hi @christywastaken,

I'll look into it as soon as I can.

[kaskenov]

@christywastaken is it the only color picker on the page?

[christywastaken]

@christywastaken is it the only color picker on the page?

Yeah, the only one.

[kaskenov]

@christywastaken @cyhnkckali understood, I'll fix.